Beispiel:Vertical-align.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Beispiel zu vertical-align</title> <style> 

 .hinweis { font-style:italic; border-bottom: thin solid #ccc; }

p { line-height:2; } 

 .two td    { height:60px; border:1px solid #ccc; }
 .two td[style] { width:8em; background: #ddd; font-weight:bold; font-size:12px; line-height:1.2; }
 .two td.ok { background: #0f0;}
 .two td.not { background: #f66;}

</style> <body>

Beispiel zu vertical-align

Du siehst die Auswirkung von vertical-align in verschiedenen Kontexten.

<img style="vertical-align:top;" src="/images/5/54/Landscape.svg" alt="Symbolbild" width="200">Dieser Text enthält ein Bild. Dies ist ein Inline-Element, das nicht an der Grundlinie ausgerichtet ist.

Dieser Text enthält ein Bild.<img src="/images/5/54/Landscape.svg" alt="Symbolbild" width="200"> Dies ist ein Inline-Element, das an der Grundlinie ausgerichtet ist.

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

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

</body> </html>

Abgerufen am 24.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Vertical-align.html"