Tekstu var viegli pievienot jebkurā vietā, taču bez līdzinājuma tas var izskatīties neprezentējams un mazāk pievilcīgs. Nelīdzināts teksts var arī traucēt visu tīmekļa lapas izskatu. Lai risinātu šādas problēmas tīmekļa lietojumprogrammās, mēs varam izmantot dažas noderīgas CSS īpašības, kas palīdzēs jums ātri izlīdzināt tekstus.
Šajā rakstā tiks parādīts, kā vertikāli līdzināt tekstu CSS.
Kā vertikāli izlīdzināt tekstu CSS?
CSS varat izmantot tālāk norādītos rekvizītus, lai līdzinātu tekstu vertikāli.
-
- līnijas augstuma īpašums
- parādīt un izlīdzināt vienumu rekvizītus
Tagad apskatīsim katru metodi pa vienam!
1. metode. Rindas augstuma rekvizīta izmantošana teksta vertikālai līdzināšanai CSS
' līnijas augstums Īpašums norāda apgabalu zem un uz augšu iekļautajiem elementiem. Tas nosaka teksta attālumu no citiem vienumiem. Izmantojot line-height rekvizītu, tekstu var viegli līdzināt vertikāli līdz vidum.
Piemērs
Šeit ir teksts lodziņā (apmale), kas pašlaik atrodas augšējā kreisajā pusē. Izlīdzināsim šo tekstu centrā vertikāli un horizontāli:
Tagad pāriesim pie nākamās metodes. ' Flexbox ” ir viendimensijas izkārtojums, kas ļauj formatēt HTML. Varat arī to izmantot, lai izlīdzinātu vienumus vertikāli vai horizontāli. Tātad, ņemsim piemēru un līdzināsim tekstu vertikāli, izmantojot flexbox. Piemērs Pirmkārt, mēs padarīsim savu konteineru elastīgu, iestatot vērtību “ displejs ' īpašums kā ' flex ”. Pēc tam izmantojiet ' izlīdzināt vienumus ” īpašums satura iestatīšanai centrā vertikāli. Turklāt, lai horizontāli izlīdzinātu saturu centrā, attaisnot-saturs ” īpašums tiks izmantots: CSS tekstu var viegli līdzināt vertikāli, izmantojot “ līnijas augstums ” īpašums. Varat arī izmantot ' flexbox ' teksta vertikālai līdzināšanai ar ' displejs ' un ' izlīdzināt vienumus ” īpašības. Flexbox ir viendimensijas izkārtojums, un to vienkārši izmanto priekšmetu vertikālai vai horizontālai izlīdzināšanai. Šajā ziņā tika piedāvātas divas vienkāršākās metodes, kas var palīdzēt vertikāli izlīdzināt tekstu CSS.
Lai to izdarītu, pievienojiet konteineru '
Labākā izglītojošā vietne !
div >
Kaste ir izveidota, izmantojot ' 3 pikseļi 'robeža un' 250 pikseļi 'augstums. ' fonta izmērs 'īpašums tiek izmantots ar vērtību ' 24 pikseļi ”, lai fonts būtu redzams. Mēs piešķirsim div ' līnijas augstums ” no “ 250 pikseļi ”, lai tā tekstu vertikāli izlīdzinātu vidū. Tālāk mēs izmantosim ' teksta līdzināšana ” rekvizītu, lai līdzinātu tekstu centrā:
līnijas augstums: 250 pikseļi;
teksta līdzināšana: centrs;
fonta izmērs: 24 pikseļi;
augstums: 250 pikseļi;
apmale: 3 pikseļi cieta;
}
Kā redzat, teksts ir līdzināts vertikāli centrā, izmantojot līnijas augstumu, un horizontāli līdz centram, izmantojot teksta līdzināšanas rekvizītu. 2. metode: displeja un līdzināšanas vienumu rekvizīta izmantošana teksta vertikālai līdzināšanai CSS
displejs: flex ;
izlīdzināt vienumus: centrs;
attaisnot-saturs: centrs;
fonta izmērs: 24 pikseļi;
augstums: 200 pikseļi;
apmale: 3 pikseļi cieta;
}
Norādītais teksts ir veiksmīgi līdzināts centrā:
Mēs esam nodrošinājuši metodes, kas saistītas ar teksta vertikālo izlīdzināšanu CSS. Secinājums