Zurück

vertical-align: Vertikale Ausrichtung

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:top;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:top;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:top;">vertical-align:top</span>
</p>

Beispiel für vertical-align:top

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:middle;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:middle;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:middle;">vertical-align:middle</span>
</p>

Beispiel für vertical-align:middle

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:bottom;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:bottom;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:bottom;">vertical-align:bottom</span>
</p>

Beispiel für vertical-align:bottom

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:text-top;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:text-top;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:text-top;">vertical-align:text-top</span>
</p>

Beispiel für vertical-align:text-top

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:text-bottom;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:text-bottom;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:text-bottom;">vertical-align:text-bottom</span>
</p>

Beispiel für vertical-align:text-bottom

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:baseline;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:baseline;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:baseline;">vertical-align:baseline</span>
</p>

Beispiel für vertical-align:baseline

<p>  
<span style="font-size:38px;border:1px solid #00f;vertical-align:50%;">Beispiel</span>
<span style="font-size:12px;border:1px solid #00f;vertical-align:50%;">für</span>
<span style="font-size:18px;border:1px solid #00f;vertical-align:50%;">vertical-align:50%</span>
</p>

Beispiel für vertical-align:50%

Normaler Text
<span style="vertical-align:super">Höher gestellt.</span>
Normaler Text
<span style="vertical-align:sub">Tiefer gestellt.</span>

Normaler Text Höher gestellt Normaler Text Tiefer gestellt.