Ta članek prikazuje, kako navpično poravnati besedilo znotraj flexboxa:
1. način: Uporaba lastnosti »align-item«.
Za navpično poravnavo besedila lahko uporabniki uporabijo » align-item ” lastnosti, ki jih zagotavlja CSS. Elementom pomaga nastaviti njihovo poravnavo znotraj flexboxa. Možni položaji navpične poravnave so lahko na ' vrh «, sredina «, ali » dno ” strani.
Praktične demonstracije za poravnavo elementov v teh smereh so navedene spodaj:
Primer 1: Najvišji položaj
Če želite besedilo znotraj flexboxa poravnati na zgornji položaj, uporabite » flex-start vrednost je podana v align-items ” lastnina. Ta lastnost je dodeljena glavnemu divu, ki bo prikazan kot flex. Predpostavimo, da div z razredom ' navpično ” se ustvari v datoteki HTML. Nato v datoteki CSS izberite ta razred in mu dodelite naslednje lastnosti:
.navpično {
barva : bela ;
višina : 150 slikovnih pik ;
zaslon : flex ;
oblazinjenje-levo : 20 slikovnih pik ;
align-items : flex-start ;
Barva ozadja : gozdnozelen ;
}
- Prvič, osnovni slog in poravnava sta dodeljena divu z uporabo lastnosti barve, barve ozadja in višine CSS.
- Lastnost 'display' je prav tako nastavljena na 'flex', da postane flexbox.
- Nazadnje, za prikaz besedila na začetku polja flexbox nastavite lastnost »align-items« na »flex-start.
Po izvedbi zgornje kode je spletna stran videti takole:
Izhod prikaže, da je besedilo zdaj poravnano na zgornjem položaju v polju flexbox.
Primer 2: Srednji položaj
Če želite navpično poravnati besedilo na sredini, nastavite ' center »vrednost za CSS« align-items ” Lastnost:
.navpično {barva : bela ;
višina : 150 slikovnih pik ;
zaslon : flex ;
oblazinjenje-levo : 20 slikovnih pik ;
align-items : center ;
Barva ozadja : gozdnozelen ;
}
Po izvedbi zgornje kode:
Zgornji izhod prikazuje, da je besedilo zdaj poravnano na sredino polja flexbox.
Primer 3: Spodnji položaj
Če želite nastaviti besedilo na dnu polja flexbox, dodelite » flex-end ' vrednost za ' align-items ” lastnina. Tokrat se besedilo poravna na mestu, kjer se konča flexbox, kar pomeni na spodnji strani:
.navpično {barva : bela ;
višina : 150 slikovnih pik ;
zaslon : flex ;
oblazinjenje-levo : 20 slikovnih pik ;
align-items : flex-end ;
Barva ozadja : gozdnozelen ;
}
Po izvedbi zgornje kode je spletna stran videti takole:
Zgornji izpis prikazuje, da je besedilo zdaj navpično poravnano na spodnjem položaju.
2. način: Uporaba lastnosti »justify-content«.
' justify-content Lastnost ” lahko uporabite tudi za navpično poravnavo besedila znotraj flexboxa. Vendar deluje enako kot » poravnava besedila ” in poravna elemente v smeri vrstice. Torej, če želite spremeniti smer poravnave, ' flex-direction Lastnost se uporablja za nastavitev justify-content »poravnava proti« stolpec ” smer:
.navpično {višina : 150 slikovnih pik ;
zaslon : flex ;
oblazinjenje-levo : 20 slikovnih pik ;
barva : bela ;
Barva ozadja : temnocyan ;
flex-direction : stolpec ;
justify-content : flex-end ;
}
Razlaga zgornje kode je navedena spodaj:
- ' višina ”, “ barva « in » oblazinjenje-levo Lastnosti delujejo tako kot zgornja metoda.
- Po tem nastavite » stolpec ' vrednost za ' flex-direction ” polja flexbox za uporabo slogov skozi stolpce.
- Po tem je ' justify-content ” lastnost poravna besedilo navpično.
- Na koncu je ' flex-end ' vrednost poravna element na ' dno ” strani.
Opomba : Uporabniki lahko nastavijo tudi » flex-start « in » center ' vrednosti za ' vrh «, in » sredina ” straneh.
Na primer, po izvedbi zgornje kode je spletna stran videti takole:
Zgornji izhod prikazuje, da je besedilo poravnano na dnu polja flexbox.
Zaključek
Za navpično poravnavo besedila znotraj flexboxa uporabite » align-items « in » justify-content Lastnosti CSS je mogoče uporabiti. Obe lastnosti dobita ' flex-start ”, “ center « ali » flex-end ” vrednosti za poravnavo besedila na “ vrh ”, “ sredina « in » dno ” znotraj flexboxa. Ta članek je pokazal navpično poravnavo besedila v polju flexbox.