Tekstą galima lengvai pridėti bet kur, tačiau nesulygiavus jis gali atrodyti nepriekaištingai ir mažiau patrauklus. Nelygiuotas tekstas taip pat gali sutrikdyti visą tinklalapio išvaizdą. Norėdami išspręsti tokius dalykus žiniatinklio programose, galime naudoti keletą naudingų CSS savybių, kurios padės greitai sulygiuoti tekstus.
Šiame straipsnyje bus parodyta, kaip lygiuoti tekstą vertikaliai CSS.
Kaip lygiuoti tekstą vertikaliai CSS?
CSS galite naudoti toliau nurodytas ypatybes, kad lygiuotumėte tekstą vertikaliai:
-
- linijos aukščio savybė
- rodyti ir sulygiuoti elementus
Dabar panagrinėkime kiekvieną metodą po vieną!
1 būdas: eilutės aukščio ypatybės naudojimas tekstui vertikaliai lygiuoti CSS
„ linijos aukštis “ ypatybė nurodo sritį, esančią žemiau ir į viršų eilutiniais elementais. Jis nustato teksto atstumą nuo kitų elementų. Naudojant eilutės aukščio savybę, tekstą galima lengvai lygiuoti vertikaliai iki vidurio.
Pavyzdys
Čia yra tekstas laukelyje (kraštinėje), kuris šiuo metu yra viršuje, kairėje. Sulygiuokime šį tekstą centre vertikaliai ir horizontaliai:
Dabar pereikime prie kito metodo. “ Flexbox “ – tai vienmatis maketas, leidžiantis formatuoti HTML. Taip pat galite jį naudoti norėdami lygiuoti elementus vertikaliai arba horizontaliai. Taigi, paimkime pavyzdį ir sulygiuokite tekstą vertikaliai naudodami „flexbox“. Pavyzdys Visų pirma, mes padarysime savo konteinerį lanksčią, nustatydami „ ekranas “ nuosavybė kaip “ lankstus “. Tada naudokite „ išlyginti elementus “ ypatybė, skirta turinio nustatymui centre vertikaliai. Be to, norėdami lygiuoti turinį centre horizontaliai, „ pateisinti-turinys “ turtas bus naudojamas: CSS tekstą galima lengvai lygiuoti vertikaliai naudojant „ linijos aukštis ' nuosavybė. Taip pat galite naudoti „ flexbox „vertikaliam teksto lygiavimui su“ ekranas “ ir „ išlyginti elementus “ savybes. „Flexbox“ yra vienmatis išdėstymas ir tiesiog naudojamas vertikaliam arba horizontaliam elementų išlygiavimui. Šiame įraše buvo pasiūlyti du paprasčiausi būdai, kurie gali padėti sulygiuoti tekstą vertikaliai CSS.
Norėdami tai padaryti, pridėkite konteinerį '
Geriausia edukacinė svetainė !
div >
Dėžutė formuojama naudojant ' 3 piks „siena ir“ 250 piks 'aukštis. „ šrifto dydis 'ypatybė naudojama su reikšme' 24px “, kad šriftas būtų matomas. Divui priskirsime „ linijos aukštis ' apie ' 250 piks “, norėdami sulygiuoti tekstą vertikaliai viduryje. Toliau naudosime „ teksto lygiavimas ” ypatybę, kad tekstas būtų sulygiuotas centre:
eilutės aukštis: 250 taškų;
teksto lygiavimas: centre;
šrifto dydis: 24 pikseliai;
aukštis: 250 pikselių;
kraštinė: 3 pikseliai vientisa;
}
Kaip matote, tekstas buvo sulygiuotas vertikaliai centre, naudojant eilutės aukštį, ir horizontaliai iki centro naudojant teksto lygiavimo ypatybę. 2 būdas: naudodami rodymo ir lygiavimo elementų ypatybę, norėdami vertikaliai lygiuoti tekstą CSS
ekranas: lankstus ;
lygiuoti elementus: centre;
pateisinti-turinys: centras;
šrifto dydis: 24 pikseliai;
aukštis: 200 pikselių;
kraštinė: 3 pikseliai vientisa;
}
Nurodytas tekstas sėkmingai sulygiuotas su centru:
Pateikėme metodus, susijusius su teksto lygiavimu vertikaliai CSS. Išvada