Sådan placeres webelementer med CSS Vertical Align

Google søgning









Landskab
Beskrivelse






Skov

Lorem ipsum dolor sit amet.






Ocean

Lorem ipsum dolor sit amet.

Det HTML-kode ovenfor opretter en simpel webside, der viser fire elementer: linket tekst, et billede, en indlejret video og en tabel. Det skulle se sådan ud i din browser:

Sådan justeres tekst lodret

Som standard er de fleste tekstelementer (såsom overskrifter,

, og

Nogle tekstelementer som f.eks og tag er inline. Som et resultat understøtter de lodret-align-egenskaben. For at justere tekst lodret skal du blot tildele den passende værdi til CSS-egenskaben vertikal-align.

Brug af den lodret-justerede topværdi på tekst

en {
 vertikal-align: top;
}

Tilføjelse af CSS kode ovenfor til det grundlæggende HTML-dokument vil justere toppen af tag tekst med toppen af ​​det højeste element i linjen. Producerer følgende opdaterede skærm:

Brug af den procentvise værdi på tekst

en {
 lodret justering: -50%;
}

CSS ovenfor justerer tekstelementet i en position, der er 50 % under basislinjen for det overordnede element. Det producerer følgende output i din browser:

Som du kan se på billedet ovenfor, indtager tekstelementet en position under billedet og videoelementerne, som er på samme linje. For at placere dette element ved eller over basislinjen skal du bruge en positiv procentværdi.

Brug af længdeværdien på tekst

en {
 vertikal-justering: 90px;
}

Koden ovenfor justerer basislinjen for tekstelementet i en længde på 90px over basislinjen for det overordnede element. Dette producerer følgende output i en browser:

Sådan justeres billeder lodret

Det tag er et inline element, som CSS vertical-align egenskaben fungerer godt med.

Brug af den lodrette justering super værdi på billeder

img {
 vertikal-align: super;
}

Ovenstående kode placerer billedet ved det overordnede elements superscript-grundlinje. Dette betyder på en position over basislinjen, som du kan se i følgende output:

Brug af den vertikale justering af procentværdi på billeder

img {
 lodret justering: 25 %;
}

Ovenstående kode justerer billedelementets basislinje med 25 % over basislinjen for det overordnede element. Dette frembringer følgende spejleffekt af superværdien:

Brug af den lodrette justering af længdeværdien på billeder

img {
 vertikal-justering: 5px;
}

Koden ovenfor justerer billedelementets basislinje i en position 5px over basislinjen for det overordnede element. Dette giver en effekt svarende til super- og 25%-værdierne:

Indlejrede medier såsom videoer og iframes er inline HTML-elementer. Derfor fungerer CSS vertical-align egenskaben godt med dem.

Brug af den lodrette justering super værdi på en video

video {
 vertikal-align: sub;
}

Koden ovenfor placerer videoen ved det overordnede elements subscript-baseline. Dette betyder på en position under basislinjen, som du kan se i følgende output:

Brug af den vertikale justering af procentværdi på en video

video {
 lodret justering: -25%;
}

Koden ovenfor justerer basislinjen for videoelementet med 25 % under basislinjen for det overordnede element. Dette frembringer følgende spejleffekt af underværdien:

Brug af den lodrette justering af længdeværdien på en video

video {
 vertikal-align: -5px;
}

Koden ovenfor justerer billedelementets basislinje i en position 5px under basislinjen for det overordnede element. Dette giver en effekt som under- og -25%-værdierne:

Sådan justeres elementer lodret i en tabel

Det er lidt vanskeligt at bruge egenskaben vertikal-align med en tabel, da en tabel er et blokelement. Imidlertid

Brug af den lodret-justerede topværdi på tabeldata

td {
 højde: 40px;
 vertikal-align: top;
}

Koden ovenfor tilføjer en højde på 40px til hver celle i tabellen. Det justerer derefter dataene i hver celle til toppen af ​​hver række. Dette producerer følgende output i browseren:

Brug af den lodrette midterste værdi på tabeldata

td {
 højde: 40px;
 vertikal-align: midt;
}

Den lodrette midterste værdi i koden ovenfor centrerer dataene lodret i hver celle. Det producerer følgende output i browseren:

Brug af lodret-juster bundværdien på tabeldata

td {
 højde: 40px;
 vertikal-align: bund;
}

Koden ovenfor justerer dataene i hver celle til bunden af ​​hver række. Det producerer følgende output i browseren:

Nu kan du justere elementerne på din webside

Du kan nu bruge CSS-egenskaben lodret align med et væld af forskellige inline-elementer, herunder tekst, indlejrede medier og tabeldata. Den generelle regel er, at lodret-align-egenskaben kun virker på inline- og inline-blok-elementer.

Du kan dog bruge denne egenskab på blokelementer, du skal blot konvertere dem til inline eller inline-blokelementer først. Husk, at du kan kombinere vertikaljustering med andre justeringsegenskaber, såsom tekstjustering.

Om forfatteren

Kadeisha Kean (52 artikler udgivet)

Kadeisha Kean er fuld stack softwareudvikler og teknisk/teknologiskribent. Hun har den udprægede evne til at forenkle nogle af de mest komplekse teknologiske begreber; producere materiale, der let kan forstås af enhver nybegynder teknologi. Hun brænder for at skrive, udvikle interessant software og rejse verden rundt (gennem dokumentarer).

Mere fra Kadeisha Kean