Denne artikkelen viser hvordan du vertikaljusterer tekst inne i en flexbox:
Metode 1: Bruk av egenskapen 'align-item'.
For å justere tekst vertikalt, kan brukere bruke ' align-element ” eiendom levert av CSS. Det hjelper elementene med å stille inn i flexboxen. De mulige vertikale innrettingsposisjonene kan være ved ' topp ', midten ', eller ' bunn ' side.
De praktiske demonstrasjonene for å justere elementer i disse retningene er angitt nedenfor:
Eksempel 1: Toppposisjon
For å justere teksten inne i flexbox i toppposisjonen, ' flex-start '-verdien er gitt til ' align-elementer ' eiendom. Denne egenskapen er tilordnet hoveddivisjonen som vil vises som flex. La oss anta, div med en klasse på ' vertikal ' opprettes i HTML-filen. Velg deretter den klassen i CSS-filen og tilordne følgende egenskaper:
.vertical {
farge : hvit ;
høyde : 150 piksler ;
vise : bøye seg ;
polstring-venstre : 20 piksler ;
align-elementer : flex-start ;
bakgrunnsfarge : Skoggrønn ;
}
- Først gis grunnleggende styling og justering til div ved hjelp av farge, bakgrunnsfarge og høydeegenskaper til CSS.
- Egenskapen 'display' er også satt til 'flex' for å gjøre den til en flexbox.
- Til slutt, for å vise teksten i starten av flexbox, sett 'align-items'-egenskapen til 'flex-start.
Etter å ha utført koden ovenfor, ser nettsiden slik ut:
Utgangen viser at teksten nå er justert i toppposisjonen inne i flexbox.
Eksempel 2: Midtposisjon
For å justere teksten vertikalt i midtposisjonen, sett ' senter 'verdi til CSS' align-elementer ' eiendom:
.vertical {farge : hvit ;
høyde : 150 piksler ;
vise : bøye seg ;
polstring-venstre : 20 piksler ;
align-elementer : senter ;
bakgrunnsfarge : Skoggrønn ;
}
Etter utførelse av koden ovenfor:
Utgangen ovenfor viser at teksten nå er justert i midten av flexbox.
Eksempel 3: Bunnposisjon
For å angi teksten nederst i flexbox, tilordne ' flex-ende 'verdi til ' align-elementer ' eiendom. Denne gangen blir teksten justert i posisjonen der flexboxen slutter betyr på undersiden:
.vertikal {farge : hvit ;
høyde : 150 piksler ;
vise : bøye seg ;
polstring-venstre : 20 piksler ;
align-elementer : flex-ende ;
bakgrunnsfarge : Skoggrønn ;
}
Etter å ha utført koden ovenfor, ser nettsiden slik ut:
Utdataene ovenfor viser at teksten nå er vertikalt justert i bunnposisjonen.
Metode 2: Bruk av egenskapen 'justify-content'.
« rettferdiggjøre-innhold ”-egenskapen kan også brukes til å justere teksten vertikalt inne i flexbox. Imidlertid fungerer det på samme måte som ' tekstjustering ”-egenskapen og den justerer elementer i radretningen. Så for å endre retningen på justeringen, ' flex-retning '-egenskapen brukes til å angi ' rettferdiggjøre-innhold ' justering mot ' kolonne ' retning:
.vertical {høyde : 150 piksler ;
vise : bøye seg ;
polstring-venstre : 20 piksler ;
farge : hvit ;
bakgrunnsfarge : mørkblått ;
flex-retning : kolonne ;
rettferdiggjøre-innhold : flex-ende ;
}
Forklaringen av koden ovenfor er gitt nedenfor:
- « høyde ', ' farge ' og ' polstring-venstre egenskaper fungerer akkurat som metoden ovenfor.
- Etter det, sett ' kolonne 'verdi til ' flex-retning ” av flexbox for å bruke stiler gjennom kolonner.
- Etter det, ' rettferdiggjøre-innhold ” egenskap justerer teksten vertikalt.
- Til slutt, ' flex-ende '-verdi justerer elementet på ' bunn ' side.
Merk : Brukere kan også stille inn ' flex-start ' og ' senter ' verdier til ' topp ', og ' midten henholdsvis ' sider.
For eksempel, etter å ha utført koden ovenfor, ser nettsiden slik ut:
Utgangen ovenfor viser at teksten er justert nederst i flexboxen.
Konklusjon
For å justere teksten vertikalt inne i en flexbox, ' align-elementer ' og ' rettferdiggjøre-innhold CSS-egenskaper kan brukes. Begge disse eiendommene får ' flex-start ', ' senter ' eller ' flex-ende '-verdier for å justere teksten ved ' topp ', ' midten ' og ' bunn ” retninger inne i flexbox, henholdsvis. Denne artikkelen har demonstrert vertikal justering av tekst i en flexbox.