[CSS] Vertikale Zentrierung Text

[klamm]

Ich steh aufm Schlauch grad.
Wie bekomm ich den Text vertikal-mittig in den <div>?
(so dass es wie auf klamm aussieht)

div.box-top {
                width: 185px;
                height: 20px;
                color: #FFFFFF;
                font-size: 12px;
                font-weight: bold;
                background-color: #3B5494;
            }

<div class="box-top"><img src="https://img4.klamm.de/images/dot_tab.gif"> Header</div>

 

[mbassus]

vertical-align: top;
müsste gehen.. ^^ Blackout grad, hm ?

 

[klamm]

vertical-align: top;
müsste gehen.. ^^ Blackout grad, hm ?

Ne das funzt nicht. Hat was damt zu tun, dass der Text neben dem IMG ist und deshalb an der rechten unteren Ecke des Bildes klebt (schätz ich).

 

[mbassus]

display:inline; ?

(evtl. als style im divtag und mal im img tag testen)

 

[No5251]

Versuchs mal mit "line-height:20px;" ...

 

[raven]

Man muss einen kleinen Trick anwenden, weil das Image stört.
Ist aber auch sauberer, wenn man es auf diese Weise löst:

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:

<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.

 

[klamm]

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).

 

[mbassus]

Klar macht das Sinn, bei der Menge von aufrufen spart das durchaus wieder (wenn auch wirklich nur im nanominiwinzigbereich) resourcen..