Begriffe Grundgerüst Wichtige HTML-Tags CSS Arbeitsaufträge

Vertical-Align

Mit vertical-align kann ein Element in vertikaler Richtung ausgerichtet werden. Folgende Optionen stehen zur Verfügung (Auswahl):

baseline
--> Der Text wird an der Grundlinie des übergeordneten Elements ausgerichtet. Das ist die Standardeinstellung.
text-top
--> Der Text wird am oberen Rand des übergeordneten Elements ausgerichtet.
text-bottom
--> Der Text wird am unteren Rand des übergeordneten Elements ausgerichtet.
sub
--> Der Text wird als Index geschrieben (zum Beispiel für mathematische oder chemische Formeln nützlich).
super
--> Der Text wird hochgestellt (zum Beispiel für mathematische oder chemische Formeln nützlich).

Eine vollständige Liste aller Optionen findest du unter www.w3schools.com.

<p>Das folgende Bild <img src="/html/img/car.png" style="vertical-align: text-top; width: 30px"> wird als <em>text-top</em> ausgerichtet.</p>
<p>Das folgende Bild <img src="/html/img/car.png" style="vertical-align: text-bottom; width: 30px"> wird als <em>text-bottom</em> ausgerichtet.</p>
<p>Die chemische Formel für Wasser (mit <em>sub</em>): H<span style="vertical-align: sub; font-size: 70%">2</span>O</p>
<p>Eine bekannte physikalische Formel (mit <em>super</em>): E = mc<span style="vertical-align: super; font-size: 70%">2</span></p>

Das folgende Bild wird mit text-top ausgerichtet.

Das folgende Bild wird mit text-bottom ausgerichtet.

Die chemische Formel für Wasser (mit sub): H2O

Eine bekannte physikalische Formel (mit super): E = mc2