Vertikal justering af tekst

Siden er opdateret 23.1.2008

Eksempel på lodret justering at indhold i tabelcelle

td {

vertical-align: top;

}

På mine sider er indhold i tabelceller som standard sat til toppen af cellen. Browserdefault er middle.

Vertikal justering i en tabel:
<td style="vertical-align:top">	Tekst er justeret `top`.	Teksten er her justeret således, at tekstens står i topen af cellen.
<td style="vertical-align:middle">	Tekst er justeret `middle`.	Teksten er her justeret således, at teksten står vertikalt midt i cellen.
<td style="vertical-align:bottom">	Tekst er justeret `bottom`.	Teksten er her justeret således, at tekstens i bunden af cellen.

Eksempel på vertikal justering af tekst i <div>:

Definitioner med _ foran er specifikt rettet mod IE


<div style="border:1px solid #ccf; color:black; background:#eee; display: table; height: 200px;  _position: relative; overflow: hidden;">

<div style="_position: absolute;  _top: 50%;display: table-cell; vertical-align: middle;">

<div style="border:1px solid #ccf; _position: relative;  _top: -50%; width:100%; color:black; background:#fff;">Neget tekst, der er centreret lodret ...</div>

</div>

</div>

Neget tekst, der er centreret lodret i den omgivende boks på 200 pixels i højden.

Vertikal justering af tekst

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003