In CSS steuert die Eigenschaft „vertikal-align“ die vertikale Ausrichtung von Elementen auf Inline-Ebene oder Tabellenzellen innerhalb ihres enthaltenden Elements. Dies gilt für Elemente, die Teil einer Textzeile sind oder als Inline-Block oder Tabellenzelle angezeigt werden.

Die Eigenschaft „vertikal ausrichten“ wird üblicherweise für Inline-Elemente wie Bilder, Text oder Inline-Block-Elemente innerhalb einer Textzeile verwendet. Es gilt nicht direkt für Elemente auf Blockebene; Sie können sie jedoch mithilfe von Techniken wie Flexbox oder Positionierung vertikal ausrichten.

Syntax:

Hier ist die grundlegende Syntax für die Vertical-Align-Eigenschaft:

 selector { vertical-align: value; } 

Der „Wert“ kann eine der folgenden Optionen sein:

Grundlinie:Richtet die Grundlinie des Elements an der Grundlinie seines übergeordneten Elements aus. Dies ist der Standardwert für die meisten Elemente.Sub:Richtet die Grundlinie des Elements an der tiefgestellten Grundlinie der Schriftart des übergeordneten Elements aus.Super:Richtet die Grundlinie des Elements an der hochgestellten Grundlinie der Schriftart des übergeordneten Elements aus.Spitze:Richten Sie die Oberseite des Elements an der Oberseite des höchsten Elements auf der Linie innerhalb des Linienfelds aus.Text oben:Richtet den oberen Rand des Elements am oberen Rand der Schriftart des übergeordneten Elements aus.Mitte:Zentriert das Element vertikal relativ zum übergeordneten Element.Unten:Richten Sie die Unterseite des Elements an der Unterseite des untersten Elements auf der Linie innerhalb des Linienfelds aus.Text unten:Richten Sie den unteren Rand des Elements am unteren Rand der Schriftart des übergeordneten Elements aus.Prozentsatz:Das Element wird vertikal in einem angegebenen Prozentsatz der Zeilenhöhe ausgerichtet. Vertical-align: 50 % zentriert das Element beispielsweise vertikal innerhalb seines übergeordneten Elements.

HINWEIS: Denken Sie daran, dass „vertikal ausrichten“ je nach Elementtyp und Kontext, in dem es verwendet wird, ein spezifisches Verhalten aufweist, sodass die Auswirkungen möglicherweise nicht immer eindeutig sind. Dies ist besonders nützlich, um Inline-Elemente an Text oder anderen Inline-Elementen auszurichten.

Beispiele

Hier sind einige weitere Details und Beispiele im Zusammenhang mit der Eigenschaft „vertical-align“ in CSS:

1. Grundlinienausrichtung:

Die vertikal ausgerichtete GrundlinieDer Wert richtet die Grundlinie des Elements an der Grundlinie seines übergeordneten Elements aus. Dies ist das Standardverhalten für die meisten Elemente auf Inline-Ebene.

Grundlinie Anderer Text

2. Tiefgestellt und hochgestellt:

Die vertikale Ausrichtung:Der Unterwert richtet die Grundlinie des Elements an der tiefgestellten Grundlinie der Schriftart des übergeordneten Elements aus, sodass es als tiefgestellt erscheint. Andererseits,vertikal ausrichten:Super richtet die Grundlinie des Elements an der hochgestellten Grundlinie der Schriftart des übergeordneten Elements aus.

H₂O ist Wasser. X²+ und²= r²

3. Ausrichtung oben und unten:

Die vertikale Ausrichtung:Der obere Wert richtet die Oberkante des Elements an der Oberkante des höchsten Elements auf der Linie innerhalb des Linienfelds aus. Ähnlich,vertikal ausrichten:Die Unterseite richtet die Unterseite des Elements an der Unterseite des untersten Elements auf der Linie innerhalb des Linienfelds aus.

Oben ausgerichtet Unten ausgerichtet

4. Mittelausrichtung:

Die vertikale Ausrichtung:Der mittlere Wert zentriert das Element vertikal relativ zum übergeordneten Element. Dies wird häufig verwendet, um Symbole oder Bilder im Text zu zentrieren.

Dieses Symbol ist vertikal zentriert

5. Textausrichtung oben und unten:

Die vertikale Ausrichtung:Der Text-Top-Wert richtet den oberen Rand des Elements am oberen Rand der Schriftart und des übergeordneten Elements ausvertikal ausrichten:Text-bottom richtet den unteren Rand des Elements am unteren Rand der Schriftart des übergeordneten Elements aus.

Text oben ausgerichtet Text unten ausgerichtet

Java-Collections-Framework

6. Prozentuale Ausrichtung:

Durch die Verwendung eines Prozentwerts mit vertikaler Ausrichtung können Sie das Element vertikal mit einem bestimmten Zeilenhöhenprozentsatz ausrichten. Beispiel: Vertical-align: 50 % zentriert das Element auf halber Zeilenhöhe.

Vertikal zentriert

7. Vertikale Zentrierung von Elementen auf Blockebene:

Um ein Element auf Blockebene innerhalb seines übergeordneten Elements vertikal zu zentrieren, können Sie das Flexbox- oder Rasterlayout verwenden.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 

8. Vertikale Zentrierung mit unbekannter Elementhöhe:

Wenn Sie die Höhe des Elements, das Sie vertikal zentrieren möchten, nicht kennen, können Sie eine Kombination aus Position und Transformation verwenden:

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

9. Vertikale Zentrierung mit mehrzeiligem Text:

Um mehrzeiligen Text innerhalb eines Containers vertikal zu zentrieren, können Sie eine Kombination aus Flexbox und einem Pseudoelement verwenden:

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; } 

10. Vertikale Zentrierung von Bildern in einem Container mit unterschiedlichen Seitenverhältnissen:

Wenn Sie Bilder mit unterschiedlichen Seitenverhältnissen haben, die Sie in einem Container zentrieren möchten, können Sie eine Kombination aus Flexbox und Objektanpassung verwenden:

HTML:

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2"> 

CSS:

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 

11. Vertikale Ausrichtung mit Linienhöhe kombinieren:

Sie können die Eigenschaft „vertikal-align“ mit der Eigenschaft „line-height“ kombinieren, um eine präzisere vertikale Ausrichtung zu erreichen, insbesondere bei größeren Schriftgrößen.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 

12. Verwenden der display-Eigenschaft für die Ausrichtung:

Während die vertikale Ausrichtung hauptsächlich bei Elementen auf Inline-Ebene funktioniert, können Sie die Anzeigeeigenschaft ändern, um eine vertikale Ausrichtung für Elemente auf Blockebene in bestimmten Kontexten zu erreichen.

 .container { display: table-cell; vertical-align: middle; } 

13. Vertikale Ausrichtung in Tabellen:

Die Eigenschaft „vertikal ausrichten“ wird häufig in Tabellenzellen verwendet (), um die Ausrichtung des Inhalts innerhalb von Zellen zu steuern.

 td { vertical-align: middle; } 

14. Ausrichtung der Inline-Blockelemente:

Sie können die vertikale Ausrichtung verwenden, um Inline-Block-Elemente innerhalb einer Textzeile auszurichten, beispielsweise Symbole neben Text.

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } 

Dies sind nur einige Beispiele für den Umgang mit der vertikalen Ausrichtung in verschiedenen Szenarien. Abhängig von Ihrem spezifischen Layout und Ihren Anforderungen müssen Sie diese Techniken möglicherweise anpassen oder kombinieren, um die gewünschten Ergebnisse zu erzielen. CSS bietet verschiedene Tools, um die vertikale Ausrichtung in verschiedenen Kontexten effektiv zu handhaben.

Denken Sie daran, dass die Eigenschaft „Vertical-Alignment“ zwar Verwendungsmöglichkeiten hat, es jedoch umfassendere Lösungen für alle Ausrichtungsszenarien gibt, insbesondere für Elemente auf Blockebene. Für komplexere Layouts und Ausrichtungsanforderungen wird empfohlen, moderne CSS-Layouttechniken wie Flexbox, CSS Grid oder sogar CSS-Positionswerte (wie absolute und relative) auszuprobieren, um die gewünschten Ergebnisse effektiver und vorhersehbarer zu erzielen.

Denken Sie daran, dass „vertikal ausrichten“ nur Elemente oder Tabellenzellen auf Inline-Ebene betrifft. Verwenden Sie Techniken wie Flexbox, Rasterlayout oder Positionierung, um Elemente auf Blockebene vertikal auszurichten.

Noch ein paar Beispiele

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> 

Ausgabe

Nun gibt es ein weiteres Beispiel, in dem wir den Text am Bild ausrichten.

Beispiel

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. 

Ausgabe

Vorteile der vertikalen Ausrichtung in CSS

Einfache Verwendung für Inline-Elemente:Mit der Eigenschaft „Vertical-Align“ können Sie Elemente wie Bilder, Symbole oder Text unkompliziert innerhalb einer Textzeile oder anderen Elementen ausrichten.Breite Browserunterstützung:Die Vertical-Align-Eigenschaft verfügt über eine gute Browserunterstützung und wird von verschiedenen Browsern weitgehend unterstützt.Mehrere Ausrichtungsoptionen:Es bietet verschiedene Ausrichtungsoptionen wie Grundlinie, Mitte, oben, unten, Text oben, Text unten, tiefgestellt und hochgestellt und gibt Entwicklern Flexibilität bei der Ausrichtung von Elementen entsprechend ihren Anforderungen.Responsive Ausrichtung:Es kann im Responsive Design verwendet werden, um die vertikale Ausrichtung basierend auf der Größe des Containers oder dem verfügbaren Platz anzupassen.Einfachheit für Inline-Elemente:Zum Ausrichten kleiner Elemente wie Symbole oder Bilder innerhalb einer Textzeile bietet die Eigenschaft „vertikal ausrichten“ eine relativ einfache Lösung, ohne dass komplexe Layouttechniken erforderlich sind.Feinabstimmung:Die Eigenschaft ermöglicht die Feinabstimmung der vertikalen Position von Elementen, was zum Erreichen bestimmter Designziele nützlich sein kann.Konsistenz mit Tabellenzellen:Im Kontext von Tabellen steuert die Eigenschaft Vertical-Align die Inhaltsausrichtung innerhalb von Tabellenzellen. Dies kann dazu beitragen, die Konsistenz zwischen tabellenbasierten Layouts aufrechtzuerhalten.Mit Text kombinieren:Es richtet Elemente effektiv am Textinhalt aus, z. B. indem es Symbole oder Inline-Beschriftungen am angrenzenden Text ausrichtet.Seitenverhältnisse beibehalten:Beim Ausrichten von Bildern oder Symbolen innerhalb einer Textzeile kann die vertikale Ausrichtung dazu beitragen, das Seitenverhältnis dieser Elemente beizubehalten, insbesondere in Kombination mit geeigneten Schriftgrößen und Zeilenhöhen.Schnelle Ausrichtungskorrekturen:Wenn Sie schnelle Lösungen für vertikale Ausrichtungsprobleme benötigen, insbesondere in Szenarien mit gemischten Inhalten, kann die vertikale Ausrichtung eine schnelle Lösung bieten, ohne dass eine umfassende Layout-Umstrukturierung erforderlich ist.CSS-E-Mail-Styling:In HTML-E-Mails, in denen komplexe Layouts besser unterstützt werden müssen, kann die Verwendung der vertikalen Ausrichtung für die grundlegende vertikale Ausrichtung von Elementen hilfreich sein, ohne auf externe Stylesheets oder komplexe Techniken angewiesen zu sein.Kompatibel mit Display:Inline-Block: Die Vertical-Align-Eigenschaft ist mit Inline-Block-Elementen kompatibel und ermöglicht eine einfache vertikale Ausrichtung solcher Elemente innerhalb einer Zeile.Konsistenz wahren:Bei Elementen, die Teil von Tabellendaten sind oder über verschiedene Zeilen oder Spalten hinweg an ähnlichen Elementen ausgerichtet werden müssen, kann die vertikale Ausrichtung dazu beitragen, die visuelle Konsistenz aufrechtzuerhalten.Browser-Kompatibilität:Im Gegensatz zu einigen neueren CSS-Techniken ist Vertical-Align seit langem Teil von CSS und erfreut sich einer guten browserübergreifenden Kompatibilität.

Nachteile der vertikalen Ausrichtung in CSS

Auf Inline-Elemente beschränkt:Die größte Einschränkung der Vertical-Align-Eigenschaft besteht darin, dass sie nur für Elemente oder Tabellenzellen auf Inline-Ebene funktioniert. Es gilt nicht direkt für Elemente auf Blockebene. Dies kann die vertikale Ausrichtung bei größeren Elementen oder komplexen Layouts schwieriger machen.Inkonsistentes Verhalten:Die vertikale Ausrichtung kann schwierig und inkonsistent sein, insbesondere bei unterschiedlichen Schriftgrößen, Zeilenhöhen und verschachtelten Elementen. Derselbe vertikale Ausrichtungswert kann je nach Kontext zu unterschiedlichen Ergebnissen führen.Browser-Macken:Einige ältere Browser weisen möglicherweise inkonsistente Interpretationen oder Macken mit der Eigenschaft „Vertical-Align“ auf, was zu unerwarteten Ergebnissen führen kann. Dieses Problem hat sich jedoch mit der Weiterentwicklung moderner Browser verbessert.Begrenzte Kontrolle über den Abstand:Die Eigenschaft „vertikal ausrichten“ befasst sich hauptsächlich mit der vertikalen Ausrichtung von Elementen, bietet jedoch nur wenig Kontrolle über den Abstand zwischen Elementen. Das Anpassen des Abstands erfordert häufig zusätzliche CSS- oder HTML-Änderungen.Flexbox und Grid als Alternativen:Für komplexere Layoutanforderungen und die vertikale Ausrichtung von Elementen auf Blockebene verlassen sich Entwickler häufig auf Flexbox oder CSS Grid, die robustere und vorhersehbarere Lösungen bieten.Nicht für Vollzentrierung geeignet:Während die vertikale Ausrichtung für die vertikale Ausrichtung von Inline-Elementen nützlich ist, eignet sie sich mit zusätzlichen CSS-Techniken für die vollständige Zentrierung (horizontal und vertikal) von Elementen auf Blockebene.Irreführender Name:Der Name „vertikal ausrichten“ kann irreführend sein, da er das Element nicht vertikal ausrichtet, wie Entwickler es oft erwarten. Stattdessen steuert es die Ausrichtung des Elementinhalts innerhalb seines Zeilenfelds.Komplexität mit unterschiedlichen Schriftarten:Das Verhalten der vertikalen Ausrichtung kann unvorhersehbar sein, wenn es um Elemente mit unterschiedlichen Schriftgrößen und Zeilenhöhen geht. Dies kann eine konsistente vertikale Ausrichtung erschweren.Begrenzt für komplexe Layouts:Es eignet sich nicht für komplexe Layouts oder Szenarien, in denen Sie größere Elemente auf Blockebene innerhalb eines übergeordneten Containers vertikal ausrichten müssen.Cross-Browser-Kompatibilität:Während moderne Browser die Unterstützung für die vertikale Ausrichtung verbessert haben, kann es bei älteren Browsern immer noch zu Inkonsistenzen oder unerwartetem Verhalten kommen.Alternative Techniken:Moderne CSS-Layouttechniken wie Flexbox und CSS Grid bieten leistungsfähigere und vorhersehbarere Möglichkeiten zur Handhabung komplexer Layoutanforderungen, einschließlich der vertikalen Ausrichtung von Elementen auf Inline- und Blockebene.Überlegungen zur Barrierefreiheit:Die Verwendung der vertikalen Ausrichtung für das Layout ist möglicherweise nicht der zugänglichste Ansatz, da sie Bildschirmleseprogramme und andere unterstützende Technologien beeinträchtigen könnte. Semantisches HTML und geeignete CSS-Techniken sind oft die bessere Wahl für Barrierefreiheit.Herausforderungen beim Debuggen:Das Debuggen von unerwartetem Verhalten oder Ausrichtungsproblemen im Zusammenhang mit der vertikalen Ausrichtung kann manchmal schwierig sein, insbesondere wenn es um verschachtelte Elemente und unterschiedliche Schriftgrößen geht.Entwicklung des Weblayouts:Während sich die Webentwicklungslandschaft weiterentwickelt, bieten neue Layouttechniken wie CSS Grid Layout und Flexbox modernere und umfassendere Lösungen für Layoutherausforderungen, wodurch die vertikale Ausrichtung für viele Szenarien möglicherweise weniger relevant wird.

Insgesamt ist die Vertical-Align-Eigenschaft zwar praktisch zum Ausrichten von Inline-Elementen oder Tabellenzellen innerhalb einer Textzeile, Entwickler benötigen jedoch häufig andere CSS-Techniken für komplexere Layout- und Positionierungsanforderungen, insbesondere wenn sie mit Elementen auf Blockebene oder komplexen Layouts arbeiten. CSS Flexbox und CSS Grid sind leistungsstarke Alternativen für eine umfassendere Ausrichtung und Positionierungskontrolle.

Abschluss

Die Eigenschaft „Vertical-Align“ eignet sich zum Ausrichten von Inline-Elementen innerhalb von Text- oder Tabellenzellen. Es weist jedoch Einschränkungen auf und es kann schwierig sein, es bei komplexen Layouts oder Elementen auf Blockebene effektiv einzusetzen. Entwickler sollten moderne CSS-Layouttechniken in Betracht ziehen, die mehr Kontrolle und Flexibilität bei der Ausrichtung und Positionierung bieten.