Slik plasserer du webelementer med CSS Vertical Align

Google søk









Natur
Beskrivelse






skog

Lorem ipsum dolor sit amet.






hav

Lorem ipsum dolor sit amet.

De HTML-kode ovenfor oppretter en enkel nettside som viser fire elementer: koblet tekst, et bilde, en innebygd video og en tabell. Det skal se slik ut i nettleseren din:

Slik justerer du tekst vertikalt

Som standard er de fleste tekstelementer (som overskrifter,

, og

Noen tekstelementer som f.eks og taggen er innebygd. Som et resultat støtter de egenskapen vertikaljustering. For å justere tekst vertikalt, tilordne rett og slett riktig verdi til CSS-egenskapen for vertikal justering.

Bruke den vertikaljusterte toppverdien på tekst

en {
 vertikal-juster: topp;
}

Legger til CSS-kode ovenfor til det grunnleggende HTML-dokumentet vil justere toppen av tag tekst med toppen av det høyeste elementet på linjen. Produserer følgende oppdaterte skjerm:

Bruke prosentverdien på tekst

en {
 vertikaljustering: -50 %;
}

CSS-en ovenfor justerer tekstelementet i en posisjon som er 50 % under grunnlinjen til det overordnede elementet. Den produserer følgende utgang i nettleseren din:

Som du kan se på bildet ovenfor, inntar tekstelementet en posisjon under bilde- og videoelementene, som er på samme linje. For å plassere dette elementet ved eller over grunnlinjen, bruk en positiv prosentverdi.

Bruke lengdeverdien på tekst

en {
 vertikaljustering: 90px;
}

Koden ovenfor justerer grunnlinjen til tekstelementet med en lengde på 90px over grunnlinjen til det overordnede elementet. Dette produserer følgende utdata i en nettleser:

Slik justerer du bilder vertikalt

De taggen er et innebygd element, som CSS vertikal-align-egenskapen fungerer godt med.

Bruke den vertikaljusterte superverdien på bilder

img {
 vertikal-align: super;
}

Koden ovenfor plasserer bildet ved den hevete grunnlinjen til det overordnede elementet. Dette betyr på en posisjon over grunnlinjen, som du kan se i følgende utdata:

Bruke den vertikaljusterte prosentverdien på bilder

img {
 vertikaljustering: 25 %;
}

Koden ovenfor justerer grunnlinjen til bildeelementet med 25 % over grunnlinjen til det overordnede elementet. Dette gir følgende speileffekt av superverdien:

Bruk av den vertikaljusterte lengdeverdien på bilder

img {
 vertikaljustering: 5px;
}

Koden ovenfor justerer grunnlinjen til bildeelementet i en posisjon 5 px over grunnlinjen til det overordnede elementet. Dette gir en effekt som ligner på super- og 25 %-verdiene:

Innebygde medier som videoer og iframes er innebygde HTML-elementer. Derfor fungerer CSS vertical-align-egenskapen utmerket med dem.

Bruk av superverdien for vertikal justering på en video

video {
 vertikal-align: sub;
}

Koden ovenfor plasserer videoen ved abonnentgrunnlinjen til det overordnede elementet. Dette betyr på en posisjon under grunnlinjen, som du kan se i følgende utdata:

Bruke den vertikaljusterte prosentverdien på en video

video {
 vertikaljustering: -25 %;
}

Koden ovenfor justerer grunnlinjen til videoelementet med 25 % under grunnlinjen til det overordnede elementet. Dette gir følgende speileffekt av underverdien:

Bruke den vertikaljusterte lengdeverdien på en video

video {
 vertikal-justering: -5px;
}

Koden ovenfor justerer grunnlinjen til bildeelementet i en posisjon 5 px under grunnlinjen til det overordnede elementet. Dette gir en effekt som sub- og -25%-verdiene:

Slik justerer du elementer vertikalt i en tabell

Å bruke egenskapen vertikal-align med en tabell er litt vanskelig, siden en tabell er et blokkelement. Imidlertid

Bruke den vertikaljusterte toppverdien på tabelldata

td {
 høyde: 40px;
 vertikal-juster: topp;
}

Koden ovenfor legger til en høyde på 40px til hver celle i tabellen. Den justerer deretter dataene i hver celle til toppen av hver rad. Dette gir følgende utgang i nettleseren:

Bruke den vertikale midtre verdien på tabelldata

td {
 høyde: 40px;
 vertikal-juster: midt;
}

Den vertikale midtre verdien i koden ovenfor sentrerer dataene vertikalt i hver celle. Den produserer følgende utgang i nettleseren:

Ved å bruke den vertikaljusterte nederste verdien på tabelldata

td {
 høyde: 40px;
 vertikal-align: bunn;
}

Koden ovenfor justerer dataene i hver celle til bunnen av hver rad. Den produserer følgende utgang i nettleseren:

Nå kan du justere elementene på nettsiden din

Du kan nå bruke CSS-egenskapen for vertikal justering med en rekke forskjellige innebygde elementer, inkludert tekst, innebygde medier og tabelldata. Den generelle regelen er at egenskapen vertikal-align bare fungerer på inline- og inline-blokk-elementer.

Du kan imidlertid bruke denne egenskapen på blokkelementer, du trenger bare å konvertere dem til inline- eller inline-blokkelementer først. Husk at du kan kombinere vertikaljustering med andre justeringsegenskaper, for eksempel tekstjustering.

Om forfatteren

Kadeisha Kean (52 artikler publisert)

Kadeisha Kean er en fullstack-programvareutvikler og teknisk/teknologiskribent. Hun har den utpregede evnen til å forenkle noen av de mest komplekse teknologiske konseptene; produsere materiale som lett kan forstås av enhver teknologinybegynner. Hun er lidenskapelig opptatt av å skrive, utvikle interessant programvare og reise verden rundt (gjennom dokumentarer).

Mer fra Kadeisha Kean