Denne artikel viser, hvordan man lodret justere tekst inde i en flexbox:
Metode 1: Brug af egenskaben 'align-item'.
For at justere tekst lodret kan brugere bruge ' align-emne ” ejendom leveret af CSS. Det hjælper elementerne med at indstille deres justering inde i flexboxen. De mulige lodrette justeringspositioner kan være ved ' top ', midten ', eller ' bund ” side.
De praktiske demonstrationer for at justere elementer i disse retninger er angivet nedenfor:
Eksempel 1: Topposition
For at justere teksten inde i flexboxen i den øverste position, skal ' flex-start ' værdi er angivet til ' align-elementer ” ejendom. Denne egenskab er tildelt hoved-div, som vil blive vist som flex. Lad os antage, at div'en med en klasse på ' lodret ” oprettes i HTML-filen. Vælg derefter den klasse i CSS-filen og tildel følgende egenskaber:
.lodret {
farve : hvid ;
højde : 150 px ;
Skærm : bøje ;
polstring-venstre : 20 px ;
align-elementer : flex-start ;
baggrundsfarve : skovgrøn ;
}
- Først gives grundlæggende styling og justering til div'en ved hjælp af farve, baggrundsfarve og højdeegenskaber for CSS.
- Egenskaben 'display' er også indstillet til 'flex' for at gøre den til en flexbox.
- Til sidst, for at vise teksten i starten af flexbox, skal du indstille egenskaben 'align-items' til 'flex-start.
Efter at have udført ovenstående kode, ser websiden sådan ud:
Outputtet viser, at teksten nu er justeret øverst i flexboxen.
Eksempel 2: Mellemposition
For at justere teksten lodret i midterpositionen skal du indstille ' centrum ' værdi til CSS ' align-elementer ” ejendom:
.lodret {farve : hvid ;
højde : 150 px ;
Skærm : bøje ;
polstring-venstre : 20 px ;
align-elementer : centrum ;
baggrundsfarve : skovgrøn ;
}
Efter udførelse af ovenstående kode:
Ovenstående output viser, at teksten nu er justeret i midten af flexboxen.
Eksempel 3: Bundposition
For at indstille teksten i bunden af flexbox, tildel ' flex-ende ' værdi til ' align-elementer ” ejendom. Denne gang bliver teksten justeret på den position, hvor flexboxen slutter betyder i bunden:
.lodret {farve : hvid ;
højde : 150 px ;
Skærm : bøje ;
polstring-venstre : 20 px ;
align-elementer : flex-ende ;
baggrundsfarve : skovgrøn ;
}
Efter at have udført ovenstående kode, ser websiden sådan ud:
Ovenstående output viser, at teksten nu er lodret justeret i den nederste position.
Metode 2: Brug af egenskaben 'justify-content'.
Det ' retfærdiggøre-indhold egenskaben kan også bruges til at justere teksten lodret inde i flexboxen. Det fungerer dog på samme måde som ' tekstjustering ” egenskab, og den justerer elementer i rækkeretningen. Så for at ændre retningen af justeringen, ' flex-retning egenskaben bruges til at indstille ' retfærdiggøre-indhold ' justering mod ' kolonne ” retning:
.lodret {højde : 150 px ;
Skærm : bøje ;
polstring-venstre : 20 px ;
farve : hvid ;
baggrundsfarve : mørkcyan ;
flex-retning : kolonne ;
retfærdiggøre-indhold : flex-ende ;
}
Forklaringen af ovenstående kode er givet nedenfor:
- Det ' højde ', ' farve ' og ' polstring-venstre ” egenskaber fungerer ligesom ovenstående metode.
- Indstil derefter ' kolonne ' værdi til ' flex-retning ” i flexboxen for at anvende typografier gennem kolonner.
- Derefter vil ' retfærdiggøre-indhold ” egenskab justerer teksten lodret.
- I sidste ende vil ' flex-ende ' værdi justerer elementet på ' bund ” side.
Bemærk : Brugere kan også indstille ' flex-start ' og ' centrum ' værdier til ' top ', og ' midten henholdsvis ” sider.
For eksempel, efter at have udført ovenstående kode ser websiden sådan ud:
Ovenstående output viser, at teksten er justeret i bunden af flexboxen.
Konklusion
For at justere teksten lodret inde i en flexbox, skal ' align-elementer ' og ' retfærdiggøre-indhold ” CSS-egenskaber kan bruges. Begge disse ejendomme får ' flex-start ', ' centrum ' eller ' flex-ende ' værdier for at justere teksten ved ' top ', ' midten ' og ' bund ” anvisninger inde i flexboxen hhv. Denne artikel har demonstreret den lodrette justering af tekst i en flexbox.