Einzeiligen Text vertikal zentrieren
Mit dieser Art von Zentrierung kann man einzeiligen Text vertikal zentrieren, was vorallem nützlich für ein horizontales Menü oder eine Fussnote ist. Dafür muss man der Linienhöhe (line-height) den gleichen Wert wie bei der Höhe (height) zuweisen. Dabei kann man alle möglichen absoluten und relativen Angaben verwenden ausser Prozentangaben.
Beispiel Code
<div id="foot">Vertikal zentriert</div>
#foot {
height: 45px;
line-height: 45px;
}
Nach obenBeispiel
Dazu noch ein Beispiel.
Twisting
Wichtig zu erwähnen wäre noch, dass innerhalb von Inline-Elementen mit vertical-align:center; zentriert werden kann - in Blockelementen wie <p>- oder <div>-tags nicht.
Wenn es nur um eine Fussnote geht, würde ich statt dem <div> einen Absatz verwenden (<p>), da mir das sinnvoller erscheint, als für den Text einen Extra-<div> zu machen. Dafür muss man nur bei der Formatierung noch die natürlichen Aussen- und Innenabstände beachten.
u32v45k
interessant, aber was sind 'Protentangaben', etwa eine neue CSS-Größeneinheit ;-) ?
u32v45k
nochwas ;)
"EINZEILIGEN TEXT VERTIKAL ZENTRIEREN" würde mehr deutsch klingen
Twisting
Hab's korrigiert - danke.
pippilotta
Wollte gerade genau dazu etwas schreiben :-)
Bei line-height kann man sich die Angabe height ersparen. Ausserdem erspart line-height eben die verticale Ausrichtung, da es dieses automatisch erledigt. Inline-Elemente müssen dann allerdings als display:block; definiert werden, aber so kann einfach simple Textheader oder Überschriftbalken oder Footer erstellen.
standards.webmasterpro.de
he-la
Problematisch wird's nur, wenn die Fensterbreite kleiner als die DIV-Breite wird (siehe Beispiel).