text-align
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die text-align
CSS Eigenschaft legt die horizontale Ausrichtung des Inline-Inhalts innerhalb eines Blockelements oder einer Tabellenzelle fest. Das bedeutet, dass sie ähnlich wie vertical-align
funktioniert, jedoch in horizontaler Richtung.
Probieren Sie es aus
text-align: start;
text-align: end;
text-align: center;
text-align: justify;
<section id="default-example">
<div id="example-element">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
Syntax
/* Keyword values */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: match-parent;
/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;
/* Global values */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;
Die text-align
-Eigenschaft wird als ein einzelnes Schlüsselwort aus der unten stehenden Liste angegeben.
Werte
start
-
Entspricht
left
, wenn die Richtung von links nach rechts verläuft, undright
, wenn die Richtung von rechts nach links verläuft. end
-
Entspricht
right
, wenn die Richtung von links nach rechts verläuft, undleft
, wenn die Richtung von rechts nach links verläuft. left
-
Der Inline-Inhalt wird am linken Rand des Linienkastens ausgerichtet.
right
-
Der Inline-Inhalt wird am rechten Rand des Linienkastens ausgerichtet.
center
-
Der Inline-Inhalt wird innerhalb des Linienkastens zentriert.
justify
-
Der Inline-Inhalt wird im Blocksatz ausgerichtet. Der Inhalt wird so verteilt, dass die linken und rechten Ränder des Linienkastens ausgerichtet werden, ausgenommen die letzte Zeile.
match-parent
-
Ähnlich wie
inherit
, aber die Wertestart
undend
werden gemäß derdirection
des Elternelements berechnet und durch den entsprechenden Wertleft
oderright
ersetzt.
Barrierefreiheit
Der ungleichmäßige Abstand zwischen Wörtern, der durch Blocksatz entsteht, kann problematisch für Menschen mit kognitiven Anliegen wie Legasthenie sein.
Formale Definition
Anfangswert | start oder ein namenloser Wert, der sich wie left verhält, falls direction den Wert ltr hat, right , falls direction den Wert rtl hat, falls start nicht vom Browser unterstützt wird. |
---|---|
Anwendbar auf | Blockcontainer |
Vererbt | Ja |
Berechneter Wert | wie angegeben, außer für den match-parent Wert, welcher in Bezug auf den direction Wert des Elternelements berechnet wird und einen berechneten Wert von left oder right ergibt |
Animationstyp | diskret |
Formale Syntax
Beispiele
Start-Ausrichtung
HTML
<p class="example">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: start;
border: solid;
}
Ergebnis
Zentrierter Text
HTML
<p class="example">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: center;
border: solid;
}
Ergebnis
Beispiel mit "justify"
HTML
<p class="example">
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
CSS
.example {
text-align: justify;
border: solid;
}
Ergebnis
Tabellen-Ausrichtung
Dieses Beispiel demonstriert die Verwendung von text-align
bei <table>
-Elementen:
- Die
<caption>
ist rechts ausgerichtet. - Die ersten beiden
<th>
-Elemente erben die linke Ausrichtung vontext-align: left
, das auf den<thead>
gesetzt ist, während das dritte rechts ausgerichtet ist. - Innerhalb des
<tbody>
-Elements ist die erste Zeile rechts ausgerichtet, die zweite zeilenmittig und die dritte nutzt die Standardausrichtung (links). - Innerhalb jeder Zeile sind einige Zellen (c12, c31) so gesetzt, dass sie die Ausrichtung der Zeile überschreiben.
HTML
<table>
<caption>
Example table
</caption>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th class="right">Col 3</th>
</tr>
</thead>
<tbody>
<tr class="right">
<td>11</td>
<td class="center">12</td>
<td>13</td>
</tr>
<tr class="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="r3">
<td class="right">31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
border: solid black 1px;
width: 250px;
height: 150px;
}
thead {
text-align: left;
}
td,
th {
border: solid 1px black;
}
.center {
text-align: center;
}
.right,
caption {
text-align: right;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Logical Properties and Values Level 1 # text-align |
CSS Text Module Level 3 # text-align-property |