En tekst kan enkelt legges til hvor som helst, men uten justering kan den se lite presentabel og mindre attraktiv ut. Ujustert tekst kan også forstyrre hele utseendet til en nettside. For å takle slike ting i nettapplikasjoner kan vi bruke noen nyttige egenskaper til CSS som vil hjelpe deg med å justere tekster på kort tid.
Denne artikkelen vil demonstrere hvordan du justerer 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 elementer
La oss nå gå gjennom hver metode en etter en!
Metode 1: Bruk linjehøyde-egenskap for å justere tekst vertikalt i CSS
« linjehøyde ”-egenskapen spesifiserer området under og oppover inline-elementer. Den angir avstanden til en tekst fra andre elementer. Ved å bruke line-height-egenskapen kan tekst enkelt justeres vertikalt til midten.
Eksempel
Her er en tekst inne i en boks (ramme) som for øyeblikket er plassert øverst til venstre. La oss justere denne teksten til midten vertikalt og horisontalt:
La oss nå gå mot neste metode. ' 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 på ' vise ' eiendom som ' bøye seg '. Deretter bruker du ' align-elementer ” egenskap for å sette innholdet i sentrum vertikalt. Dessuten, for å justere innhold i midten horisontalt, ' rettferdiggjøre-innhold egenskapen vil bli brukt: I CSS kan tekst enkelt justeres vertikalt ved hjelp av ' linjehøyde ' eiendom. Du kan også bruke ' flexbox ' for vertikal justering av tekst med ' vise ' og ' align-elementer ' eiendommer. Flexbox er en endimensjonal layout og brukes ganske enkelt for vertikal eller horisontal justering av elementer. Dette innlegget tilbød to enkleste metoder som kan hjelpe deg med å justere tekst vertikalt i CSS.
For å gjøre det, legg til en beholder '
Beste pedagogiske nettsted !
div >
Boksen er formet ved hjelp av en ' 3 px 'grense og' 250 piksler 'høyde. « skriftstørrelse ' egenskapen brukes med verdien ' 24px ” for å gjøre skriften synlig. Vi vil tildele div en ' linjehøyde ' av ' 250 piksler ” for å justere teksten vertikalt i midten. Deretter vil vi bruke ' tekstjustering ' egenskap for å justere teksten i midten:
linjehøyde: 250px;
tekst-align: center;
skriftstørrelse: 24px;
høyde: 250px;
kantlinje: 3px solid;
}
Som du kan se, har teksten blitt justert vertikalt til midten ved hjelp av linjehøyde og horisontalt til midten med tekstjusteringsegenskapen. Metode 2: Bruke egenskap for display og align-items for å justere tekst vertikalt i CSS
vise: bøye seg ;
align-items: center;
rettferdiggjøre-innhold: senter;
skriftstørrelse: 24px;
høyde: 200px;
kantlinje: 3px solid;
}
Den angitte teksten er midtstilt:
Vi har gitt metoder knyttet til å justere tekst vertikalt i CSS. Konklusjon