Beispiel zu vertical-align

Sie sehen die Auswirkung von vertical-align in verschiedenen Kontexten.

Dieser Text hat verschiedene Inline-Elemente, die bezüglich der Grundlinie wie folgt ausgerichtet sind. Die aktuell verwendeten vertical-align Werte sind grau hinterlegt.
-normal- top -normal- super -normal- text-top -normal- middle -normal-
-normal- baseline -normal- text-bottom -normal- sub -normal- bottom -normal-
-normal- 100% -normal- 50% -normal- -50% -normal- -100% -normal-
-normal- 10px -normal- 5px -normal- -5px -normal- -10px -normal-

Die folgende Tabelle enthält alle Varianten. Nur top, bottom middle sind anwendbar.

normal top super text-top middle baseline text-bottom sub bottom normal
normal 100% 50% -50% -100% 10px 5px -5px -10px normal