Text mit CSS2 vertikal zentriert zu positionieren, ist nicht so besonders spaßig, da nicht vorgesehen. Die Möglichkeiten, die es gibt, sind dann obendrein partiell nicht mit dem IE 6 kompatibel. Also wenn es sich vermeiden lässt, gar nicht anfangen irgendwas vertikal mit CSS zu zentrieren. Sollte kein Weg daran vorbeiführen, hier zwei Gestaltungswege:
Methode mit line-height
Dieses Vorgehen eignet sich nur für Einzeiler, also einen Schriftzug im Header oder eine horizontales Menü in Form zu bringen. Sobald was umbricht, tut sich die Hölle auf und schlimmere Dinge.
<p style="line-height: 50px; text-align: center">vertikal zentriert</p>
vertikal zentriert
Methode mit display: table-cell;
Über die CSS-Eigenschaft lässt sich jedem Element ein Tabellenverhalten aufzwingen und in Kombination mit vertical-align tatsächlich vertikales Zentrieren erreichen. Leider versteht sich der IE 6 darauf nicht. Mit zusätzlichen HTML-Code lässt sich da was machen, der Quelltext wird dann aber ein uneleganter.
<p class="code" style="display: table-cell; vertical-align: middle; height: 50px;">vertikal zentriert</p>
vertikal zentriert
