Šajā rakstā ir parādīts, kā vertikāli līdzināt tekstu elastīgajā lodziņā:
1. metode: rekvizīta “līdzināt vienumu” izmantošana
Lai vertikāli izlīdzinātu tekstu, lietotāji var izmantot līdzināt-vienums ” īpašums, ko nodrošina CSS. Tas palīdz elementiem iestatīt to izlīdzināšanu flexbox iekšpusē. Iespējamās vertikālās izlīdzināšanas pozīcijas var būt “ tops ”, vidū ”, vai “ apakšā ” pusē.
Praktiskās demonstrācijas elementu izlīdzināšanai šajos virzienos ir norādītas zemāk:
1. piemērs: augšējā pozīcija
Lai izlīdzinātu tekstu flexbox iekšpusē augšējā pozīcijā, ' flex-start ' vērtība tiek nodrošināta ' izlīdzināt vienumus ” īpašums. Šis īpašums ir piešķirts galvenajam div, kas tiks parādīts kā elastīgs. Pieņemsim, ka divi ar klasi “ vertikāli ” ir izveidots HTML failā. Pēc tam CSS failā atlasiet šo klasi un piešķiriet šādus rekvizītus:
.vertikāli {
krāsa : balts ;
augstums : 150 pikseļi ;
displejs : flex ;
polsterējums-pa kreisi : 20 pikseļi ;
izlīdzināt vienumus : flex-start ;
fona krāsa : mežzaļš ;
}
- Pirmkārt, elementam div tiek piešķirts pamata stils un līdzinājums, izmantojot CSS krāsu, fona krāsu un augstuma īpašības.
- Rekvizīts “displejs” arī ir iestatīts uz “flex”, lai padarītu to par flexbox.
- Visbeidzot, lai parādītu tekstu flexbox sākumā, iestatiet rekvizītu “align-items” uz “flex-start.
Pēc iepriekš minētā koda izpildīšanas tīmekļa lapa izskatās šādi:
Izvade parāda, ka teksts tagad ir līdzināts augšējā pozīcijā flexbox iekšpusē.
2. piemērs. Vidējā pozīcija
Lai vertikāli līdzinātu tekstu vidējā pozīcijā, iestatiet “ centrs 'vērtība CSS' izlīdzināt vienumus ” īpašums:
.vertikāli {krāsa : balts ;
augstums : 150 pikseļi ;
displejs : flex ;
polsterējums-pa kreisi : 20 pikseļi ;
izlīdzināt vienumus : centrs ;
fona krāsa : mežzaļš ;
}
Pēc iepriekš minētā koda izpildes:
Iepriekš redzamajā izvadē tiek parādīts, ka teksts tagad ir līdzināts flexbox centrā.
3. piemērs: Apakšējā pozīcija
Lai iestatītu tekstu flexbox apakšā, piešķiriet “ flex-end ' vērtību uz ' izlīdzināt vienumus ” īpašums. Šoreiz teksts tiek līdzināts vietā, kur beidzas flexbox, kas nozīmē apakšā:
.vertikāli {krāsa : balts ;
augstums : 150 pikseļi ;
displejs : flex ;
polsterējums-pa kreisi : 20 pikseļi ;
izlīdzināt vienumus : flex-end ;
fona krāsa : mežzaļš ;
}
Pēc iepriekš minētā koda izpildīšanas tīmekļa lapa izskatās šādi:
Iepriekš redzamajā izvadē tiek parādīts, ka teksts tagad ir vertikāli līdzināts apakšējā pozīcijā.
2. metode. Īpašuma “attaisnot saturu” izmantošana
' attaisnot-saturs Rekvizītu var izmantot arī teksta vertikālai līdzināšanai flexbox iekšpusē. Tomēr tas darbojas tāpat kā “ teksta līdzināšana ” rekvizītu, un tas izlīdzina elementus rindas virzienā. Tātad, lai mainītu izlīdzināšanas virzienu, ' flex-virziens rekvizīts tiek izmantots, lai iestatītu attaisnot-saturs 'līdzināšana uz ' kolonna ” virziens:
.vertikāli {augstums : 150 pikseļi ;
displejs : flex ;
polsterējums-pa kreisi : 20 pikseļi ;
krāsa : balts ;
fona krāsa : tumši zils ;
flex-virziens : kolonna ;
attaisnot-saturs : flex-end ;
}
Iepriekš minētā koda skaidrojums ir sniegts zemāk:
- ' augstums ”, “ krāsa ' un ' polsterējums-pa kreisi ” īpašības darbojas tāpat kā iepriekš minētā metode.
- Pēc tam iestatiet “ kolonna ' vērtību uz ' flex-virziens ” no flexbox, lai piemērotu stilus kolonnās.
- Pēc tam ' attaisnot-saturs ” rekvizīts līdzinās tekstu vertikāli.
- Galu galā ' flex-end ' vērtība izlīdzina elementu uz ' apakšā ” pusē.
Piezīme : lietotāji var arī iestatīt “ flex-start ' un ' centrs ' vērtības uz ' tops ', un ' vidū ” puses, attiecīgi.
Piemēram, pēc iepriekš minētā koda izpildes tīmekļa lapa izskatās šādi:
Iepriekš redzamajā izvadē tiek parādīts, ka teksts ir līdzināts flexbox apakšā.
Secinājums
Lai vertikāli līdzinātu tekstu elastīgajā lodziņā, izlīdzināt vienumus ' un ' attaisnot-saturs ” Var izmantot CSS rekvizītus. Abas šīs īpašības iegūst ' flex-start ”, “ centrs ” vai “ flex-end ' vērtības, lai līdzinātu tekstu pie ' tops ”, “ vidū ' un ' apakšā ” norādes attiecīgi flexbox iekšpusē. Šajā rakstā ir parādīta teksta vertikālā līdzināšana elastīgajā lodziņā.