Paano I-right Align ang isang Div Gamit ang CSS?

Paano I Right Align Ang Isang Div Gamit Ang Css



Ang pagbabalanse ng nilalaman ay isang pangunahing bahagi ng isang webpage na maaaring magpapataas at magpababa sa pokus at interes ng user. Sa HTML, ang elemento ng div ay ginagamit upang pagpangkatin ang ilang mga elemento at payagan ang CSS na maglapat ng mga katangian sa lahat ng mga naninirahan na elemento nang sabay-sabay. Ang developer ay maaaring magpakita ng nilalaman sa isang mas mahusay na paraan nang hindi binabawasan ang karanasan ng user gamit ang kanan at kaliwang pagkakahanay.

Ipinapakita ng artikulong ito ang tamang pagkakahanay ng isang div sa mga praktikal na halimbawa gamit ang CSS.

Paano I-right Align ang isang Div Gamit ang CSS?

Maaaring i-align ng developer ang bawat elemento ng div o larawan sa paraang ginagawang mas kaakit-akit ang website. Dahil sa kanilang mataas na kakayahang umangkop, ang mga elemento ng div ay maaaring magamit sa maraming paraan sa web page tulad ng pagtukoy sa mga seksyon ng pahina, paggawa ng mga column, at pagbabalot ng mga hanay ng nauugnay na nilalaman.





Sundin ang mga pamamaraan sa ibaba upang i-right-align ang div:



Paraan 1: Gamit ang 'float' Property

Sa HTML file, lumikha ng isang div at italaga ito ng isang klase ng ' align-to-right ”. Ang klase at div na ito ay ginagamit sa buong artikulong ito.



< div klase = 'align-to-right' >
< p > Ito ay ilang nilalaman. < / p >
< / div >

Ngayon, piliin ang div class na iyon ' align-to-right ” at italaga ang mga katangian ng CSS. Ang mga katangiang ito ay ginagamit para sa mas mahusay na visualization:



.align-to-right {
lumutang: kanan;
padding: 10px;
background- kulay : hotpink;
}

Sa code sa itaas, ang ' lumutang ” ang ari-arian ay nakatakda sa kanan. Ito ay lumulutang o gumagalaw sa div sa tamang direksyon sa webpage. Ang mga katangian ng padding at kulay ng background ay nakatakda sa ' 10px 'at' hotpink ” ayon sa pagkakabanggit.

Pagkatapos i-compile ang snippet ng code sa itaas, ganito ang hitsura ng webpage:



Kinukumpirma ng output sa itaas na ang div ay gumagalaw sa tamang direksyon.

Paraan 2: Paggamit ng 'tama' na Ari-arian

Sa CSS, piliin ang div class at itakda ang “ tama ” property to 0. Tinitiyak nito na ang distansya ng napiling div mula sa kanang bahagi ay katumbas ng zero. Pagkatapos, itakda ang ' posisyon ” ari-arian sa “ ganap ” para maayos ang posisyon ng div. Sa huli, maglapat ng ilang katangian ng pag-istilo para sa mas magandang visualization:

.align-to-right
{
tama: 0 ;
posisyon: ganap;
padding: 10px;
background- kulay : mediumpurple;
}

Pagkatapos isagawa ang webpage ng code ay ganito ang hitsura:

Ipinapakita ng output na ang div ay nakahanay na ngayon sa kanan.

Paraan 3: Paggamit ng Flex Layout

Ang Flex ay ang pinaka mahusay na paraan, at pinapanatili nito ang layout sa panahon ng pagbabago ng laki ng window. Maaaring i-right-align ang div gamit ang CSS ' Flex Layout ' ari-arian. Ang layout ng Flex ay naglalaman ng maraming katangian para sa iba't ibang layunin.

Sa HTML file lumikha ng isang parent div at sa loob nito ay lumilikha ng dalawang magkapatid na div. Gayundin, italaga ang bawat div ng isang natatanging klase:

< div klase = 'align-to-right' >
< div klase = 'naka-align sa kaliwa' >
< p > Ito ay ilan pa nilalaman .< / p >
< / div >
< div klase = 'nakahanay sa kanan' >
< h1 >Kumusta Mula sa Linuxhint < / h1 >
< / div >
< / div >

Ngayon sa loob ng '