[CSS] Vertikale Zentrierung Text

klamm

Chef
Teammitglied
ID: 20876
L
20 April 2006
13.647
1.367
Ich steh aufm Schlauch grad.
Wie bekomm ich den Text vertikal-mittig in den <div>?
(so dass es wie auf klamm aussieht)



HTML:
div.box-top {
                width: 185px;
                height: 20px;
                color: #FFFFFF;
                font-size: 12px;
                font-weight: bold;
                background-color: #3B5494;
            }
HTML:
<div class="box-top"><img src="https://img4.klamm.de/images/dot_tab.gif"> Header</div>
 
Man muss einen kleinen Trick anwenden, weil das Image stört.
Ist aber auch sauberer, wenn man es auf diese Weise löst:

PHP:
div.box-top {
  width: 155px;
  height: 20px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  background-color: #3B5494;
  background-image: url(https://img4.klamm.de/images/dot_tab.gif);
  background-repeat: no-repeat;
  padding-left: 30px;
  line-height: 20px;
}
Und dann im HTML einfach nur noch:
HTML:
<div class="box-top">Header</div>
Habs getestet - bei mir gehts wunderbar.
Den padding-left-Parameter einfach bei Bedarf anpassen, aber darauf achten, den width-Parameter ebenfalls korrekt anzupassen.
 
Ah der gute alte BG-Trick in Verbindung mit line-height.
Das wars! Danke! :)

Edit: Meint ihr es macht Sinn, zumindest mal die blauen "Container" von klamm so zu gestalten? Spart immerhin 2 <tabel>-Verschachtelungen und die Boxen sind ja immer gleich vom Aufbau her (bei den Inhalten sind Tabellen dann schon oft praktischer, weil zu viel immer anders aussieht und ich will ja keine <div>-Suppe).
 
Klar macht das Sinn, bei der Menge von aufrufen spart das durchaus wieder (wenn auch wirklich nur im nanominiwinzigbereich) resourcen..