6.1 Die Eigenschaft text-align
Textausrichtung — das ist fast der wichtigste Aspekt der Webseitengestaltung, der es erlaubt zu kontrollieren, wie der Text in den Containern angeordnet ist. CSS bietet zwei wesentliche Eigenschaften zur Textausrichtung: text-align und vertical-align. Diese Eigenschaften ermöglichen die Steuerung der horizontalen und vertikalen Ausrichtung des Textes.
Die Eigenschaft text-align steuert die horizontale Ausrichtung des Textes innerhalb eines Blockelements. Sie definiert, wie der Text in Bezug auf die Grenzen des Elements ausgerichtet ist.
Werte
left: Textausrichtung am linken Rand (Standard für Text von links nach rechts)right: Textausrichtung am rechten Rand (Standard für Text von rechts nach links)center: Zentrierung des Textesjustify: Ausrichtung des Textes an linken und rechten Rändern, wobei Leerzeichen zwischen den Wörtern hinzugefügt werden, um den Text gleichmäßig über die gesamte Breite des Containers zu verteilenstart: Ausrichtung des Textes am Anfang (links oder rechts, abhängig von der Leserichtung)end: Ausrichtung des Textes am Ende (rechts oder links, abhängig von der Leserichtung)
Beispiel:
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align: justify;
}
<body>
<p class="left">Dieser Text ist am linken Rand ausgerichtet.</p>
<p class="right">Dieser Text ist am rechten Rand ausgerichtet.</p>
<p class="center">Dieser Text ist zentriert.</p>
<p class="justify">Dieser Text ist im Blocksatz ausgerichtet. Er wird gestreckt, sodass der Text die gesamte Breite des Containers einnimmt.</p>
</body>
6.2 Die Eigenschaft vertical-align
Die Eigenschaft vertical-align steuert die vertikale Ausrichtung eines Elements in Bezug auf die Baseline seines Elternteils. Sie wird am häufigsten verwendet, um eingebettete Elemente, wie Bilder, Textzeilen oder Tabellen, vertikal in einer Textzeile oder einem anderen Container auszurichten.
Werte:
baseline: Ausrichtung zur Baseline des Elternteils (Standardwert)sub: Ausrichtung als tiefgestellter Indexsuper: Ausrichtung als hochgestellter Indextext-top: Ausrichtung am oberen Rand der Schrift des Elternteilstext-bottom: Ausrichtung am unteren Rand der Schrift des Elternteilsmiddle: Ausrichtung in der Mitte des Elternteilstop: Ausrichtung am oberen Rand des Containersbottom: Ausrichtung am unteren Rand des Containers- Prozentwert: Verschiebung des Elements um den angegebenen Prozentsatz relativ zur Zeilenhöhe
Beispiel:
.container {
height: 100px;
border: 1px solid #000;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.percent-50 {
vertical-align: 50%;
}
<body>
<div class="container">
<span class="baseline">baseline</span>
<span class="sub">sub</span>
<span class="super">super</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="middle">middle</span>
<span class="top">top</span>
<span class="bottom">bottom</span>
<span class="percent-50">50%</span>
</div>
</body>
GO TO FULL VERSION