SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:CSS 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>
<h1>Beispiel zu vertical-align</h1>
<p class="hinweis">Sie sehen die Auswirkung von vertical-align in verschiedenen Kontexten. </p>

<p class="e"><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.</p>
<p class="one">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.</p>
<hr>
<p>Die folgende Tabelle enthält alle Varianten. Nur <i>top</i>, <i>bottom</i> <i>middle</i>	sind anwendbar.</p>
  <p>Die folgende Tabelle enthält alle Varianten. 
  Nur <i>top</i>, <i>bottom</i> <i>middle</i> sind anwendbar.</p>
  <table class="two">
    <tr>
    <td>normal</td>
    <td style="vertical-align:top" class="ok">top</td>
    <td style="vertical-align:super" class="not">super</td>
    <td style="vertical-align:text-top" class="not">text-top</td>
    <td style="vertical-align:middle" class="ok">middle</td>
    <td style="vertical-align:baseline" class="not">baseline</td>
    <td style="vertical-align:text-bottom" class="not">text-bottom</td> 
    <td style="vertical-align:sub" class="not">sub</td>
    <td style="vertical-align:bottom" class="ok">bottom</td>
    <td>normal</td>
    </tr>
    <tr>
    <td>normal</td>
    <td style="vertical-align:100%" class="not">100%</td> 
    <td style="vertical-align:50%" class="not">50%</td>
    <td style="vertical-align:-50%" class="not">-50%</td>
    <td style="vertical-align:-100%" class="not">-100%</td>
    <td style="vertical-align:10px" class="not">10px</td>
    <td style="vertical-align:5px" class="not">5px</td>
    <td style="vertical-align:-5px" class="not">-5px</td>
    <td style="vertical-align:-10px" class="not">-10px</td>
    <td>normal</td>
    </tr>
  </table>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_vertical-align.html&oldid=92218“