See artikkel näitab, kuidas paindkastis teksti vertikaalselt joondada.
1. meetod: atribuudi „joondamine” kasutamine
Teksti vertikaalseks joondamiseks saavad kasutajad kasutada joondada-üksus ” atribuut, mille pakub CSS. See aitab elementidel flexboxi sees joondada. Võimalikud vertikaalsed joonduspositsioonid võivad olla ' üleval ”, keskel ”, või „ põhja ” pool.
Allpool on toodud praktilised näited elementide joondamiseks nendes suundades:
Näide 1: Ülemine positsioon
Paindkasti sees oleva teksti joondamiseks ülemises asendis tuleb „ flex-start ' väärtus antakse väärtusele ' joondada-üksused ” vara. See atribuut on määratud põhiüksusele, mis kuvatakse paindlikuna. Oletame, et div klassiga ' vertikaalne ” luuakse HTML-failis. Seejärel valige CSS-failis see klass ja määrake järgmised atribuudid:
.vertikaalne {
värvi : valge ;
kõrgus : 150 pikslit ;
kuva : painduv ;
polster-vasak : 20 pikslit ;
joondada-üksused : flex-start ;
taustavärv : metsaroheline ;
}
- Esiteks antakse elementile div põhiline stiil ja joondus, kasutades CSS-i värvi, taustavärvi ja kõrguse omadusi.
- Atribuut 'kuva' on samuti seatud väärtusele 'flex', et muuta see flexboxiks.
- Lõpuks, teksti kuvamiseks flexboxi alguses määrake atribuudiks „align-items” väärtuseks „flex-start.
Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:
Väljund kuvab, et tekst on nüüd joondatud flexboxi sees ülemises positsioonis.
Näide 2: keskmine asend
Teksti vertikaalseks joondamiseks keskmises asendis määrake ' Keskus ' väärtus CSS-ile ' joondada-üksused ” vara:
.vertikaalne {värvi : valge ;
kõrgus : 150 pikslit ;
kuva : painduv ;
polster-vasak : 20 pikslit ;
joondada-üksused : Keskus ;
taustavärv : metsaroheline ;
}
Pärast ülaltoodud koodi täitmist:
Ülaltoodud väljund näitab, et tekst on nüüd flexboxi keskel joondatud.
Näide 3: Alumine positsioon
Paindkasti allservas oleva teksti määramiseks määrake ' painduv ots ' väärtus väärtusele ' joondada-üksused ” vara. Seekord joondatakse tekst kohas, kus flexbox lõpeb, tähendab allosas:
.vertikaalne {värvi : valge ;
kõrgus : 150 pikslit ;
kuva : painduv ;
polster-vasak : 20 pikslit ;
joondada-üksused : painduv ots ;
taustavärv : metsaroheline ;
}
Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:
Ülaltoodud väljund näitab, et tekst on nüüd alumises asendis vertikaalselt joondatud.
2. meetod: atribuudi „justify-content” kasutamine
' õigustama-sisu ” atribuuti saab kasutada ka teksti vertikaalseks joondamiseks flexboxis. Kuid see töötab samamoodi nagu ' teksti joondamine ” atribuut ja joondab elemendid rea suunas. Joondussuuna muutmiseks tuleb painduv suund atribuuti kasutatakse ' õigustama-sisu 'joondumine' suunas veerg ” suund:
.vertikaalne {kõrgus : 150 pikslit ;
kuva : painduv ;
polster-vasak : 20 pikslit ;
värvi : valge ;
taustavärv : tumetsüaan ;
painduv suund : veerg ;
õigustama-sisu : painduv ots ;
}
Ülaltoodud koodi selgitus on toodud allpool:
- ' kõrgus ”, „ värvi ” ja „ polster-vasak ” omadused töötavad täpselt nagu ülaltoodud meetod.
- Pärast seda määrake ' veerg ' väärtus väärtusele ' painduv suund flexboxi stiilide rakendamiseks veergude kaudu.
- Pärast seda ' õigustama-sisu ” atribuut joondab teksti vertikaalselt.
- Lõpuks ' painduv ots väärtus joondab elemendi ' põhja ” pool.
Märge : kasutajad saavad määrata ka ' flex-start ” ja „ Keskus ' väärtused väärtusele ' üleval ”, ja „ keskel ” külgedel vastavalt.
Näiteks pärast ülaltoodud koodi käivitamist näeb veebileht välja järgmine:
Ülaltoodud väljund näitab, et tekst on flexboxi allosas joondatud.
Järeldus
Teksti vertikaalseks joondamiseks flexboxis tuleb joondada-üksused ” ja „ õigustama-sisu CSS-i atribuute saab kasutada. Mõlemad omadused saavad ' flex-start ”, “ Keskus ” või „ painduv ots ' väärtused, et joondada tekst kohaga ' üleval ”, “ keskel ” ja „ põhja ” juhised vastavalt flexboxi sees. See artikkel on näidanud teksti vertikaalset joondamist paindkastis.