Mahalaga ang paglalagay ng mga item sa isang web page sa pangkalahatang disenyo nito. Kahit na may iba pang mga paraan upang maimpluwensyahan ang layout, tulad ng paggamit ng mga talahanayan ( na hindi namin inirerekumenda ), ang pinakamahusay ay ang paggamit ng CSS .
Sa ibaba, titingnan namin kung paano gumamit ng isang simpleng estilo ng in-line na estilo ng CSS upang ihanay ang mga larawan, mga talahanayan, mga talata, at higit pa.
Tandaan: Ang mga parehong paraan ay maaaring magamit sa mga panlabas na estilo ng sheet masyadong ngunit dahil ang mga ito ay nalalapat sa mga indibidwal na mga item at malamang na kailangan upang manatili na paraan, mas mahusay na gamitin ang mga in-line styling tulad ng kung ano ang nabanggit sa ibaba.
I-align ang mga Talata ng Teksto
Ang talatang tag ay ang unang lugar upang simulan sa pagtula ang iyong web page. Ang pagbubukas at pagsasara ng mga tag ay ganito:
Ang default na pag-align ng teksto sa isang talata ay sa kaliwang bahagi ng pahina, ngunit maaari mo ring ihanay ang iyong mga talata sa kanan at sentro.
Ang paggamit ng float property ay nagbibigay-daan sa iyong maayos ang mga talata sa kanan o kaliwa ng elemento ng magulang. Ang anumang iba pang mga elemento sa loob ng elementong magulang na iyon ay dumadaloy sa paligid ng nilalang na elemento.
Upang makuha ang pinakamahusay na epekto sa isang talata, pinakamahusay na magtakda ng lapad sa talata na mas maliit sa elemento ng lalagyan (magulang).
I-align ang Text Inside Paragraphs
Ang mapagkumpitensya, ang pinaka-kagiliw-giliw na pagkakahanay para sa teksto ng talata ay "katwiran," na nagsasabi sa browser na ipakita ang teksto na nakahanay, mahalagang, sa parehong kanan at kaliwang panig ng window.
Upang bigyang-katwiran ang teksto sa isang talata, gagamitin mo ang teksto na nakahanay sa ari-arian.
Maaari mo ring ihanay ang lahat ng mga teksto sa loob ng isang talata sa kanang bahagi o sa kaliwa (ang default), gamit ang teksto-align ng ari-arian.
Ang tekstong ihanay ng ari-arian ay ihanay ang teksto sa loob ng elemento. Sa teknikal, hindi dapat i-align ang mga larawan na nakapaloob sa loob ng talata o iba pang elemento, subalit karamihan sa mga browser ay tinatrato ang mga imahe bilang inline para sa property na ito.
Aligning Images
Gamit ang float na ari-arian sa isang tag ng imahe maaari mong tukuyin ang paglalagay ng mga imahe sa pahina at kung paano ang teksto ay balutin sa paligid ng mga ito.
Tulad ng mga parapo sa itaas, ang estilo ng float estilo sa tag na imahe ay ipapalagay ang iyong imahe sa pahina at sasabihin sa browser kung paano daloy ng teksto at iba pang mga elemento sa paligid ng larawang iyon.
Ang sumusunod na teksto ng tag ng imahe sa itaas ay dadaloy sa paligid ng larawan sa kanan habang nagpapakita ang imahe sa kaliwa ng screen.
Kung gusto ko ang teksto na huminto sa pag-wrap sa paligid ng imahe, gagamitin ko ang malinaw na ari-arian:
Aligning Higit sa Mga Talata
Gayunpaman, paano kung nais mong i-align ang higit pa sa isang talata o isang imahe? Maaari kang maglagay ng estilo ng ari-arian sa bawat talata, ngunit may isang tag na magagamit mo na mas epektibo:
Lamang palibutan ang teksto at mga imahe (kabilang ang mga tag ng HTML ) na may tag at ang estilo ng ari-arian (float o text-align) at lahat ng bagay sa na dibisyon ay nakahanay kung paano mo ito nais.
Tandaan na ang mga alignment na idinagdag sa mga parapo o mga imahe sa loob ng dibisyon ay pinarangalan, na napapalitan ang tag.