Tim Tepaße: Text in Layer vertikal zentrieren

Beitrag lesen

Hallo Maik,

#Footer {
/* ... */
vertical-align:middle;
}

im body steht:
<div id="Footer">text</div>

Die Eigenschaft vertical-align wirkt sich laut Standard nur in Tabellenzellen
oder innerhalb der line box, die durch ein inline-level Element generiert
wurde aus.

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

Letzteres klingt kryptisch, heißt aber übersetzt, daß es sich nur auf
die Ausrichtung von Text relativ zur Grundlinie des Textes auswirkt.

Wenn ich Dein Problem richtig verstehe, dann willst Du ungefähr folgenden
Effekt erreichen, nämlich das der Text innerhalb einer größeren positionierten
Box horizontal und vertikal zentriert ist:

-----------------------------------------------
 |                                             |
 |                                             |
 |                    text                     |
 |                                             |
 |                                             |
 -----------------------------------------------

Mit vertical-align ist das nicht möglich, es sei denn, Du benutzt bislang
noch eher kritisch im praktischen Einsatz zu beurteilende Einstellungen
für die Box wie display:table-cell.

An Deiner Stelle würde ich den Text im Inneren der Box anders zentrieren,
entweder über die Eigenschaft padding des footes-divs oder durch Einsetzen
einer zweiten Box, die dann über die Eigenschaft margin zentriert wird.

<div id="footer">
    <div style="margin:auto">
      text
    </div>
  </div>

Natürlich ist das alles keine schöne Variante der Auszeichnung, aber ich
weiß nicht, inwiewiet Du die Möglichkeit hast, Dein aktuelles Konzept neu
zu überdenken.

  • Tim