Paano I-align ang Teksto nang Patayo sa CSS

Madaling maidagdag ang isang text kahit saan, ngunit kung walang alignment, maaari itong magmukhang hindi maganda at hindi gaanong kaakit-akit. Ang hindi nakahanay na teksto ay maaari ding makagambala sa buong hitsura ng isang web page. Upang matugunan ang mga ganoong bagay sa mga web application, maaari kaming gumamit ng ilang kapaki-pakinabang na katangian ng CSS na tutulong sa iyo na ihanay ang mga teksto sa lalong madaling panahon.

Ipapakita ng artikulong ito kung paano i-align ang teksto nang patayo sa CSS.

Paano I-align ang Teksto nang Patayo sa CSS?

Sa CSS, maaari mong gamitin ang mga katangian sa ibaba upang ihanay ang teksto nang patayo:

- ari-arian ng taas ng linya
- display at align-item properties

Ngayon, isa-isahin natin ang bawat pamamaraan!

Paraan 1: Paggamit ng line-height na Property para I-align ang Text nang Patayo sa CSS

Ang ' taas ng linya Tinutukoy ng ” property ang lugar sa ibaba at pataas na inline na mga elemento. Itinatakda nito ang distansya ng isang text mula sa iba pang mga item. Gamit ang line-height property, madaling i-align ang text nang patayo sa gitna.

Halimbawa

Narito ang isang text sa loob ng isang kahon (border) na kasalukuyang matatagpuan sa kaliwang bahagi sa itaas. Ihanay natin ang tekstong ito sa gitna nang patayo at pahalang:

Upang gawin ito, magdagdag ng lalagyan '

” sa loob ng tag na ng HTML file at tukuyin ang kinakailangang teksto dito:

< div >
Pinakamahusay na Website na Pang-edukasyon !
div >

Ang kahon ay nabuo gamit ang isang ' 3px 'hangganan at' 250px “taas. Ang ' laki ng font 'Ang ari-arian ay ginagamit na may halagang ' 24px ” upang gawing nakikita ang font. Magtatalaga kami ng div a ' taas ng linya 'ng' 250px ” para sa pag-align ng teksto nito nang patayo sa gitna. Susunod, gagamitin namin ang ' text-align ” property para i-align ang text sa gitna:

div {
taas ng linya: 250px;
text-align: center;
laki ng font: 24px;
taas: 250px;
hangganan: 3px solid;
}

Tulad ng nakikita mo, ang teksto ay nakahanay nang patayo sa gitna gamit ang taas ng linya at pahalang sa gitna gamit ang pag-aari ng text-align.

Ngayon lumipat tayo sa susunod na paraan.

Paraan 2: Paggamit ng display at align-item na Property para I-align ang Text nang Patayo sa CSS

“ Flexbox ” ay isang one-dimensional na layout na nagbibigay-daan sa iyong mag-format ng HTML. Maaari mo ring gamitin ito upang ihanay ang mga item nang patayo o pahalang.

Kaya, kumuha tayo ng isang halimbawa at ihanay ang isang teksto nang patayo sa tulong ng flexbox.

Halimbawa

Una sa lahat, gagawin naming flexible ang aming lalagyan sa pamamagitan ng pagtatakda ng halaga ng ' display ” ari-arian bilang “ baluktot ”. Susunod, gamitin ang ' align-item ” property para sa pagtatakda ng nilalaman sa gitna nang patayo. Bukod dito, upang ihanay ang nilalaman sa gitna nang pahalang, ang ' justify-content ” pag-aari ang gagamitin:

div {
display: baluktot ;
align-item: center;
justify-content: center;
laki ng font: 24px;
taas: 200px;
hangganan: 3px solid;
}

Ang tinukoy na teksto ay matagumpay na nai-align sa gitna:

Nagbigay kami ng mga pamamaraan na nauugnay sa pag-align ng teksto nang patayo sa CSS.

Konklusyon

Sa CSS, madaling ihanay ang teksto nang patayo sa tulong ng ' taas ng linya ” ari-arian. Maaari mo ring gamitin ang ' flexbox ' para sa patayong pagkakahanay ng teksto sa ' display 'at' align-item ' ari-arian. Ang Flexbox ay isang one-dimensional na layout at ginagamit lang para sa vertical o horizontal alignment ng mga item. Nag-aalok ang post na ito ng dalawang pinakamadaling paraan na makakatulong sa iyo na ihanay ang teksto nang patayo sa CSS.

Paano I-align ang Teksto nang Patayo sa CSS