vertical-align

Siden er opdateret 29. 12. 2011

Egenskaben vertical-align gør det muligt ændre placeringen af lidt indhold i højden inde i et element, som har større højde end indholdet kræver.

Egenskaben vertical-align kan have en af disse værdier:

baseline

sætter indholdets baseline på forældre-elementets baseline. Har indholdet ikke en baseline, sættes det med bunden på forældre-elementets baseline.

bottom

sætter elementet i bunden af boksen.

inherit

sætter placeringen som nærmeste overordnede elements definition.

middle

sætter elementets vertikale midtpunkt i baselinepunktet + en halv x-højde af forældre-elementet

sub

sætter elementet, så baseline flugter baseline på andre elementer med baseline sat til sub

super

sætter elementet, så baseline flugter baseline på andre elementer med baseline sat til super

text-top

sætter elementets top lig forældre-elementets tekst-toplinje.

text-bottom

sætter elementets bund lig forældre-elementets tekst-bundlinje.

top

sætter elementet i toppen af boksen.

[længde]

sætter en eksakt afstand for at hæve eller sænke elementet fra default baseline. Positive værdier er 'over baseline' og negative værdier er 'under baseline'. Gyldige værdier er:

px: sætter justeringen i pixels

[%]

sætter en %-afstand for at hæve eller sænke elementet fra default baseline. Positive værdier er 'over baseline' og negative værdier er 'under baseline'. %-værdien er relativ til elementets line-height.

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 teksten i midterste kolonne står i topen af cellen.
<td style="vertical-align:middle">	Tekst er justeret `middle`.	Teksten er her justeret således, at teksten i midterste kolonne står vertikalt midt i cellen.
<td style="vertical-align:bottom">	Tekst er justeret `bottom`.	Teksten er her justeret således, at teksten i midterste kolonne står i bunden af cellen.

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


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

<div style="display: table-cell; vertical-align: middle;">

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

</div>

</div>

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

vertical-align

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003