Hvordan justere tekst vertikalt i CSS

En tekst kan enkelt legges til hvor som helst, men uten justering kan den se upresentabel og mindre attraktiv. Ujustert tekst kan også forstyrre hele utseendet på en webside. For å takle slike ting i webapplikasjoner, kan vi bruke noen nyttige egenskaper til CSS som vil hjelpe deg å samkjøre tekster på kort tid.

Denne artikkelen vil demonstrere hvordan du skal samkjøre tekst vertikalt i CSS.

Hvordan justere tekst vertikalt i CSS?

I CSS kan du bruke egenskapene nedenfor til å justere tekst vertikalt:

• • Linjehøyde eiendom
  • Egenskaper for visning og justering av justeringer

La oss nå gå gjennom hver metode en etter en!

Metode 1: Bruke egenskap for linjehøyde for å justere tekst vertikalt i CSS

“linjehøyde”Eiendom spesifiserer området nedenfor og oppover inline elementer. Den setter avstanden til en tekst fra andre elementer. Ved hjelp av linjehøydegenskapen kan tekst enkelt justeres vertikalt til midten.

Eksempel

Her er en tekst inne i en boks (grense) som for øyeblikket er plassert øverst på venstre side. La oss justere denne teksten til sentrum vertikalt og horisontalt:

For å gjøre det, legg til en beholder “”Innenfor taggen til HTML -filen og spesifiserer den nødvendige teksten i den:

Beste pedagogiske nettsted!

Boksen er dannet ved hjelp av en “3px“Grense og“250px“Høyde. “skriftstørrelse”Eiendom brukes med verdien”24px”For å synliggjøre skriften. Vi vil tildele div en “linjehøyde”Av“250px”For å justere teksten vertikalt i midten. Deretter vil vi bruke "Tekstalign”Eiendom for å justere teksten i sentrum:

div
linjehøyde: 250px;
tekst-align: sentrum;
Font-størrelse: 24px;
Høyde: 250px;
Grense: 3px faststoff;

Som du kan se, har teksten blitt justert vertikalt til sentrum ved hjelp av linjehøyde og horisontalt til sentrum med den tekstjusterte egenskapen.

La oss nå gå mot neste metode.

Metode 2: Bruke egenskap og egenskap for å justere tekst vertikalt i CSS

“Flexbox”Er en endimensjonal layout som lar deg formatere HTML. Du kan også bruke den til å justere elementer vertikalt eller horisontalt.

Så la oss ta et eksempel og justere en tekst vertikalt ved hjelp av Flexbox.

Eksempel

Først av alt vil vi gjøre containeren vår fleksibel ved å sette verdien av "vise”Eiendom som“Flex”. Deretter, bruk "Align-elementer”Eiendom for å sette innholdet i sentrum vertikalt. For å samkjøre innhold i sentrum horisontalt, dessuten "Justify-Content”Eiendom vil bli brukt:

div
Display: Flex;
Align-elementer: sentrum;
Justify-Content: Center;
Font-størrelse: 24px;
Høyde: 200px;
Grense: 3px faststoff;

Den spesifiserte teksten er tilpasset sentrum med hell:

Vi har gitt metoder relatert til å justere tekst vertikalt i CSS.

Konklusjon

I CSS kan tekst enkelt justeres vertikalt ved hjelp av "linjehøyde”Eiendom. Du kan også bruke "Flexbox“For den vertikale justeringen av tekst med“vise”Og“Align-elementer" egenskaper. Flexbox er en endimensjonal layout og brukes ganske enkelt til den vertikale eller horisontale justeringen av elementer. Dette innlegget bød på to enkleste metoder som kan hjelpe deg å samkjøre tekst vertikalt i CSS.