En tekst kan nemt tilføjes hvor som helst, men uden justering kan den se upræsentabel og mindre attraktiv ud. Ujusteret tekst kan også forstyrre hele udseendet af en webside. For at tackle sådanne ting i webapplikationer kan vi bruge nogle nyttige egenskaber ved CSS, som vil hjælpe dig med at justere tekster på ingen tid.
Denne artikel vil demonstrere, hvordan man justerer tekst lodret i CSS.
Hvordan justerer man tekst lodret i CSS?
I CSS kan du bruge nedenstående egenskaber til at justere tekst lodret:
-
- linjehøjde egenskab
- egenskaber for visning og justering af elementer
Lad os nu gennemgå hver metode en efter en!
Metode 1: Brug af line-height-egenskab til at justere tekst lodret i CSS
Det ' linjehøjde ” egenskab angiver området under og opadgående inline-elementer. Den indstiller afstanden mellem en tekst og andre elementer. Ved at bruge egenskaben linjehøjde kan tekst nemt justeres lodret til midten.
Eksempel
Her er en tekst inde i en boks (ramme), der i øjeblikket er placeret øverst til venstre. Lad os justere denne tekst til midten lodret og vandret:
Lad os nu gå mod den næste metode. “ Flexbox ” er et endimensionelt layout, der giver dig mulighed for at formatere HTML. Du kan også bruge det til at justere elementer lodret eller vandret. Så lad os tage et eksempel og justere en tekst lodret ved hjælp af flexbox. Eksempel Først og fremmest vil vi gøre vores container fleksibel ved at indstille værdien af ' Skærm ' ejendom som ' bøje ”. Brug derefter ' align-elementer ” egenskab til at indstille indholdet i midten lodret. Desuden, for at justere indholdet i midten vandret, ' retfærdiggøre-indhold ” egenskab vil blive brugt: I CSS kan tekst nemt justeres lodret ved hjælp af ' linjehøjde ” ejendom. Du kan også bruge ' flexbox ' til lodret justering af tekst med ' Skærm ' og ' align-elementer ' ejendomme. Flexbox er et endimensionelt layout og bruges simpelthen til lodret eller vandret justering af emner. Dette indlæg tilbød to nemmeste metoder, der kan hjælpe dig med at justere tekst lodret i CSS.
For at gøre det skal du tilføje en beholder '
Bedste pædagogiske hjemmeside !
div >
Boksen er dannet ved hjælp af en ' 3 px 'grænse og' 250 px ' højde. Det ' skriftstørrelse ' egenskab bruges med værdien ' 24px ” for at gøre skrifttypen synlig. Vi vil tildele div en ' linjehøjde ' af ' 250 px ” for at justere teksten lodret i midten. Dernæst vil vi bruge ' tekstjustering ” egenskab for at justere teksten i midten:
linjehøjde: 250px;
tekst-align: center;
skriftstørrelse: 24px;
højde: 250px;
kant: 3px fast;
}
Som du kan se, er teksten blevet justeret lodret til midten ved hjælp af linjehøjde og vandret til midten med egenskaben tekstjustering. Metode 2: Brug af egenskab for display og align-items til at justere tekst lodret i CSS
Skærm: bøje ;
align-items: center;
retfærdiggøre-indhold: center;
skriftstørrelse: 24px;
højde: 200px;
kant: 3px fast;
}
Den angivne tekst er blevet centreret med succes:
Vi har leveret metoder relateret til at justere tekst lodret i CSS. Konklusion