Werte
Für jeden der folgenden Werte wenden wir ihn auf ein Inline-Bild in einem Zeilenfeld eines Listenelements an. Das Linienfeld in jedem der Bilder hat einen gepunkteten grauen Rand. Die Linie, mit der die Bilder für jeden Wert ausgerichtet werden, ist rot.
Grundlinie Dies ist der Standardwert. Es richtet die Grundlinie des Elements an der Grundlinie des Linienfelds aus. Wenn das Element keine Grundlinie hat, richtet es die untere Randkante an der Grundlinie der Linie aus.
middle Richtet den vertikalen Mittelpunkt des Elements an der Grundlinie der Linie plus der halben x-Höhe der Linie aus (bestimmt durch die font).
Dies ist einer der am häufigsten verwendeten Werte für vertical-align Eigenschaft und wird normalerweise verwendet, um Symbole und Listenmarkierungen mit dem Text in der Linie auszurichten.
sub Senkt die Grundlinie des Elements auf die richtige Position für Indizes in der Zeile. (Dieser Wert hat keine Auswirkung auf die Schriftgröße des Elementtextes.)
super Erhöht die Grundlinie des Elements an die richtige Position für hochgestellte Zeichen in der Zeile. (Dieser Wert hat keine Auswirkung auf die Schriftgröße des Elementtextes.)
text-top Richtet den oberen Rand des Elements am oberen Rand des Inhaltsbereichs der Zeile aus. Die Höhe des Inhaltsbereichs ist gerade hoch genug für die maximalen Auf- und Abwärtsbewegungen aller Schriftarten in der Zeile, und die Ausrichtungslinie ist die Spitze dieser Höhe. Beachten Sie, dass die Höhe abhängig von der Grundlinienausrichtung der Schriftarten größer sein kann als jede der beteiligten Schriftgrößen.
text-bottom Richtet den unteren Rand des Elements am unteren Rand aus des Inhaltsbereichs der Zeile. Die Höhe des Inhaltsbereichs ist gerade hoch genug für die maximalen Ab- und Aufsteiger aller Schriftarten in der Zeile, und die Ausrichtungslinie ist der untere Rand dieser Höhe. Beachten Sie, dass die Höhe abhängig von der Grundlinienausrichtung der Schriftarten größer sein kann als jede der beteiligten Schriftgrößen.
top Richtet die Oberseite des Elements an der Oberseite der aus ganze Linie. Dies bedeutet, dass, wenn andere Elemente in der Zeile unterschiedliche Höhen haben, z. B. mehrere Bilder, der obere Rand der Zeile so hoch ist wie das höchste der beiden Bilder.
Wenn für die Zeile ein explizit festgelegtes line-height Das ist höher als der höchste Inhalt in der Zeile. Der obere Rand des Zeilenfelds wird dann durch diese Höhe bestimmt.
bottom
line-height angegeben ist, wird der untere Rand des Zeilenfelds durch die niedrigsten Nachkommen der Schriftart in diesem Beispiel bestimmt, sodass das Ergebnis dem ähnelt, das wir durch die Verwendung von text-bottom. Richtet das Element am unteren Rand der gesamten Zeile aus.
Wenn für die Zeile eine explizit festgelegte line-height, der niedriger als der niedrigste Inhalt in der Zeile ist, wird der untere Rand des Zeilenfelds dann durch diese Höhe bestimmt.
line-height, die den unteren Rand der Linie nach unten streckt, und das Bild wird an diesem unteren Rand ausgerichtet.
< Prozentsatz > Heben Sie das Element über die Grundlinie an (wenn der Prozentwert positiv ist) oder senken Sie das Element darunter die Basislinie (wenn der Prozentwert negativ ist) um den angegebenen Betrag. Der angegebene Betrag ist ein Prozentsatz des Wertsline-height. Der Wert0%bedeutet dasselbe wiebaseline.
line-height ist 100 Pixel, sodass das Bild um 50 Pixel über der Grundlinie angehoben wird. < Länge > Heben Sie das Element über die Grundlinie an (wenn der Längenwert positiv ist) oder senken Sie das Element unter die Grundlinie (wenn der Längenwert negativ ist). um den angegebenen Betrag. Ein Wert ‚0‘ bedeutet dasselbe wiebaseline.
Hinweise
Die Werte top, bottom und middle verhalten sich wie erwartet, wenn sie auf Tabellenzellenelemente angewendet werden. Andere Werte können jedoch in einigen Browsern unerwartetes Verhalten aufweisen. Chris Coyier sagt es am besten:
Wenn Sie die Tabellenzellen vertikal ausrichten, ist es am besten, wenn Sie oben, unten und in der Mitte bleiben. Keiner der anderen Werte ist ohnehin sehr sinnvoll und hat unvorhersehbare browserübergreifende Ergebnisse. Wenn Sie beispielsweise eine Zelle auf „Text unten“ einstellen, wird der Text in IE 6 unten und in Safari 4 oben ausgerichtet. Wenn Sie ihn auf „Unter“ setzen, wird in IE 6 die mittlere Ausrichtung und in Safari 4 „Oben“ angezeigt.
Die standardmäßige vertikale Ausrichtung für Tabellenzellen (<td>) lautet middle. Die vertikale Standardausrichtung für ein Element auf Blockebene mit display: table-cell ist jedoch immer noch top. Dies ist die Standardausrichtung für die Blockebene Behälter im Allgemeinen. Im folgenden Demo-Abschnitt finden Sie ein Live-Beispiel.
