Paano i-align ang pahalang at patayo gamit ang CSS?

Paano I Align Ang Pahalang At Patayo Gamit Ang Css



Ang ' Pahalang na pagkakahanay ” inaayos ang mga elemento ng HTML sa X-axis ibig sabihin, sa kaliwa, kanan, o gitna sa loob ng isang parent na elemento. Sa kabilang banda, ang ' Pahalang na linya ” itina-align ang elemento sa kahabaan ng Y-axis na maaaring maging lubhang kapaki-pakinabang para sa pagsentro ng nilalaman sa loob ng isang seksyon o pag-align ng mga elemento na may iba't ibang taas. Tumutulong ang mga ito na lumikha ng custom at pare-parehong layout at mapahusay ang pagiging madaling mabasa ng nilalaman.

Ipinapakita ng gabay na ito ang pamamaraan para sa pahalang at patayong pagkakahanay gamit ang CSS.

Paano i-align ang pahalang at patayo gamit ang CSS?

Ginagamit ng mga developer ang “horizontal” at “vertical” alignment para ayusin at iposisyon ang mga elemento sa isang web page sa mas organisadong paraan. Maaaring maging kapaki-pakinabang ang mga ito sa pag-align ng mga elemento, at nilalaman, mga button o icon sa pagpoposisyon, atbp. Sundin ang mga halimbawa sa ibaba para sa mas mahusay na pag-unawa:





Pahalang na pagkakahanay

Sa CSS, ang pag-aari ng text-align ay ginagamit upang pahalang na ihanay ang teksto sa loob ng pangunahing elemento nito. Bisitahin ang mga snippet ng code sa ibaba para sa mas mahusay na pag-unawa:



< katawan >
< div klase = 'account' >
< div klase = 'leftAlign' > Ang Linuxhint ay Left Align < / div >
< div klase = 'centerAlign' > Ang Linuxhint ay Center Align < / div >
< div klase = 'i-align sa kanan' > Ang Linuxhint ay Right Align < / div >
< / div >
< / katawan >

Sa snippet ng code sa itaas:



  • Una, ang magulang' div 'Ang elemento ay ginagamit na may katangian ng klase na may halaga na ' account ”.
  • Susunod, tatlong child element ang nalikha at ang class attribute ay itinalaga sa bawat div.
  • Sa huli, ang mga halaga ng 'leftAlign', 'centerAlign', at 'rightAlign' ay ibinibigay sa mga klase.

Ngayon, ipasok ang sumusunod na mga katangian ng CSS sa “