Kaip vertikaliai išlygiuoti tekstą „Flexbox“ viduje?

Šiame straipsnyje parodyta, kaip vertikaliai išlygiuoti tekstą lanksčiame langelyje:

• Naudojant ypatybę „lygiuoti elementą“.
• „Pagrindinio turinio“ nuosavybės naudojimas

1 būdas: ypatybės „lygiuoti elementą“ naudojimas

Norėdami vertikaliai lygiuoti tekstą, vartotojai gali naudoti lygiuoti-elementą “ nuosavybė, kurią teikia CSS. Tai padeda elementams nustatyti jų išlygiavimą „flexbox“ viduje. Galimos vertikalios išlyginimo padėtys gali būti ties ' viršuje ”, vidurio “ arba „ apačioje “ pusėje.

Toliau pateikiamos praktinės elementų išlyginimo šiomis kryptimis demonstracijos:

1 pavyzdys: Viršutinė pozicija

Jei norite sulygiuoti tekstą „flexbox“ viduje viršutinėje padėtyje, „ lankstus startas “ vertė pateikiama „ išlyginti elementus ' nuosavybė. Ši savybė priskirta pagrindiniam div, kuris bus rodomas kaip lankstus. Tarkime, div su klase „ vertikaliai “ yra sukurtas HTML faile. Tada CSS faile pasirinkite tą klasę ir priskirkite šias ypatybes:

• Pirma, elementui „div“ suteikiamas pagrindinis stilius ir lygiavimas, naudojant CSS spalvos, fono spalvos ir aukščio ypatybes.
• Ypatybė „display“ taip pat nustatyta į „flex“, kad ji būtų lanksti.
• Galiausiai, norėdami, kad tekstas būtų rodomas lanksčios dėžutės pradžioje, nustatykite ypatybę „align-items“ į „flex-start.

Įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:

Išvestis rodo, kad tekstas dabar išlygiuotas viršutinėje „flexbox“ vietoje.

2 pavyzdys: Vidurinė padėtis

Norėdami vertikaliai išlygiuoti tekstą vidurinėje padėtyje, nustatykite „ centras 'vertė CSS' išlyginti elementus ' nuosavybė:

Įvykdžius aukščiau pateiktą kodą:

Aukščiau pateiktame išvestyje rodoma, kad tekstas dabar išlygiuotas lanksčiojo dėžutės centre.

3 pavyzdys: apatinė padėtis

Norėdami nustatyti tekstą „flexbox“ apačioje, priskirkite „ lankstus galas “ vertė į “ išlyginti elementus ' nuosavybė. Šį kartą tekstas sulygiuotas toje vietoje, kur baigiasi „flexbox“, reiškia apatinėje pusėje:

Įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:

Aukščiau pateiktame išvestyje rodoma, kad tekstas dabar yra vertikaliai išlygiuotas apatinėje padėtyje.

2 būdas: ypatybės „pagrįsti turinį“ naudojimas

„ pateisinti-turinys ypatybę taip pat galima naudoti norint vertikaliai išlygiuoti tekstą lanksčiojo dėžutės viduje. Tačiau jis veikia taip pat kaip „ teksto lygiavimas “ savybę ir sulygiuoja elementus eilutės kryptimi. Taigi, norėdami pakeisti lygiavimo kryptį, „ lankstumo kryptis ypatybė naudojama nustatant pateisinti-turinys 'lyginimas link' stulpelyje ' kryptis:

Aukščiau pateikto kodo paaiškinimas pateikiamas toliau:

• „ aukščio “, „ spalva “ ir „ kamšalas-kairėje “ savybės veikia taip pat, kaip aukščiau aprašytas metodas.
• Po to nustatykite „ stulpelyje “ vertė į “ lankstumo kryptis “ iš „flexbox“, kad pritaikytumėte stilius per stulpelius.
• Po to „ pateisinti-turinys “ savybė sulygiuoja tekstą vertikaliai.
• Pabaigoje „ lankstus galas ' reikšmė sulygiuoja elementą ant ' apačioje “ pusėje.

Pastaba : Vartotojai taip pat gali nustatyti „ lankstus startas “ ir „ centras “ reikšmės į “ viršuje “ ir „ vidurio “ pusės, atitinkamai.

Pavyzdžiui, įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:

Aukščiau pateiktame išvestyje rodoma, kad tekstas išlygiuotas lanksčiojo langelio apačioje.

Išvada

Norėdami vertikaliai išlygiuoti tekstą lanksčiojo dėžutės viduje, „ išlyginti elementus “ ir „ pateisinti-turinys Gali būti panaudotos CSS savybės. Abi šios savybės gauna „ lankstus startas “, „ centras “ arba „ lankstus galas “ reikšmės, kad tekstas būtų lygiuojamas ties “ viršuje “, „ vidurio “ ir „ apačioje “ kryptimis atitinkamai „flexbox“ viduje. Šiame straipsnyje parodytas vertikalus teksto lygiavimas lanksčiame langelyje.