CSS gir forskjellige justeringsstiler, for eksempel venstre, høyre, sentrum, berettiget, horisontalt og vertikalt, for forskjellige typer innhold. Mer spesifikt, for overskrift og korte linjer, “senter”Justeringsstil brukes. Ved hjelp av denne stilen kan utseendet på innhold forbedres, og det vil se pent ut.

Denne artikkelen vil forklare forskjellige metoder for å sentrum av tekst vertikalt. Så la oss starte!

Hvordan du sentrerer tekst vertikalt i CSS?

Det er mange måter å sentrere tekst vertikalt, for eksempel "Flexbox”,“linjehøyde”,“polstring”,“forvandle", og "flyte”Eiendom. I denne delen vil vi lære om noen av de nevnte egenskapene til sentrum av tekst vertikalt i CSS. Men før det vil vi vise prosedyren for senterjustering av tekst.

Eksempel

I HTML vil vi lage en beholder med klasse som heter “senter”Og inni det skaper en overskrift ved hjelp av

stikkord:

"Handle uten forventning"

Etter det, flytt til CSS -filen og stil du opprettet i HTML -filen.

Her “.senter”Brukes til å få tilgang til klassen vi tildelte . Deretter vil vi sette bredden på den opprettede beholderen til “450px”Og høyden til“200px”. Vi setter også grensen til å bruke "grense”Eiendom og tilordne verdien av grensen”10px”Og“dobbelt”:

.senter
Bredde: 450px;
Høyde: 200px;
Grense: 7px dobbelt;

Etter implementeringen av koden ovenfor får vi følgende utfall:

Her ser vi at teksten vises øverst på venstre hjørne av skjermen. Nå går vi til neste trinn, der vi vil beskrive forskjellige metoder for å sentrere tekst vertikalt ved hjelp av CSS.

Metode 1: Sentertekst vertikalt i CSS ved bruk av flex

CSS “Flex”Er verdien av“vise”Eiendom. Det brukes til å angi innhold eller elementer i henhold til deres visningsstørrelse. Det lar CSS -elementer ordne effektivt ved å skape like mellomrom mellom dem.

Syntaks

Display: Flex

Så la oss fortsette det forrige eksemplet for å sentralisere teksten vertikalt.

Eksempel

For å angi tekstposisjonen i sentrum og vertikal, vil vi tilordne verdien av visningsegenskaper som “Flex”Og justerte elementer som“senter”:

.senter
Bredde: 450px;
Høyde: 200px;
Grense: 7px dobbelt;
Display: Flex;
Align-elementer: sentrum;

Dette vil gi oss følgende utfall:

Her kan vi se at teksten vår er vertikalt på linje og også i sentrum av diven. Nå vil vi flytte til den andre metoden.

Metode 2: Sentertekst vertikalt i CSS ved hjelp av linjehøydeegenskaper

“linjehøyde”Eiendom spesifiserer høyden mellom to linjer i elementene. Det brukes til å skape plass mellom to linjer som har tekst.

Syntaks

Syntaks for egenskapen linjehøyde er gitt som:

Line-Height: Verdi

I den ovennevnte syntaks vil vi spesifisere høyden på linjen som "verdi”.

Merk: I egenskapen Line-Height kan vi ikke gi en negativ verdi.

Eksempel

Nå vil vi bruke egenskapen til linjehøyde til å sette tekst i det vertikale sentrum av . For å gjøre det, i CSS-filen, angir verdien av linjehøyde-egenskapen til “150px”:

.senter
Bredde: 450px;
Høyde: 200px;
Grense: 7px dobbelt;
linjehøyde: 150px;

Dette vil gi oss følgende utfall:

Metode 3: Sentertekst vertikalt i CSS ved hjelp av polstring

For å skape rom mellom et elements grense og dets innhold, "polstring”Eiendom brukes. Det er en shorthand -egenskap av CSS som kan brukes til å sette polstringen fra alle sider i en enkelt linje.

Syntaks

Syntaksen til padding -egenskapen er:

Polstring: øverst til venstre til venstre

Her er beskrivelsen av de ovennevnte verdiene til den nevnte egenskapen:

• topp: Det brukes til å skape plass fra toppen.
• Ikke sant: Det brukes til å skape plass fra høyre.
• knapp: Det brukes til å skape plass fra bunnen.
• venstre: Det brukes til å skape plass fra venstre.

Merk: Å spesifisere to verdier vil betegne polstring fra topp og bunn og polstring fra venstre og høyre; Imidlertid, hvis en verdi legges til, vil polstring bli brukt på alle fire sider.

Eksempel

Her vil vi sette verdien av polstring som “10%”Og“0%”, Der den første verdien indikerer topp- og bunnpolstring og den andre indikerer polstring fra venstre og høyre. Dessuten ønsker vi bare å sentralisere tekst vertikalt, så vi vil sette den andre verdien til “0”:

.senter
Grense: 7px dobbelt;
polstring: 10% 0;

Etter implementeringen av den gitte koden, gå til HTML -filen, kjør den og sjekk følgende utdata:

Vi har gitt forskjellige metoder relatert til senter som justerer tekst vertikalt i CSS.

Konklusjon

For å sentrere tekst vertikalt, bruk "Flexbox”,“linjehøyde”Og“polstring”Egenskaper til CSS. Disse egenskapene lar deg sette høyden innenfor innholdet og elementets grense. I denne artikkelen forklarer vi hvordan du sentrerer tekst vertikalt ved hjelp av tre forskjellige metoder og gir et eksempel på hver metode.