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.
Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - vertical-align
sidens top
Brugere lige nu: 1
Home Mail