gusto mo bang malaman kung paano igitna ang isang imahe sa isang DIV? Ang pagsentro ng larawan sa isang DIV ay maaaring maging kapaki-pakinabang upang mapabuti ang hitsura at organisasyon ng iyong web page, at upang i-highlight ang larawang gusto mong ipakita. Igitna ang isang larawan sa isang DIV ay hindi mahirap, ngunit nakadepende ito sa ilang salik gaya ng uri ng larawan, laki ng DIV, istilo ng DIV, atbp.
Sa artikulong ito ipaliwanag namin kung paano isentro ang isang imahe sa isang DIV gamit ang HTML at CSS, na mga programming language na ginagamit upang lumikha at magdisenyo ng mga web page. Magpapakita kami sa iyo ng ilang paraan at halimbawa upang mapili mo ang pinakaangkop sa iyo.
Ano ang isang DIV
Ang div ay isang HTML na elemento na nakasanayan na lumikha ng mga seksyon o lalagyan sa isang web page. Maaaring naglalaman ito ng iba pang mga elemento, tulad ng teksto, mga larawan, mga link, atbp. Bukod pa rito, isa itong block element, na nangangahulugan na sinasakop nito ang buong lapad ng page at iyon maaari mong tukuyin ang taas at lapad nito. Ang div ay isang generic na elemento, ibig sabihin ay wala itong partikular na semantic na kahulugan. Para sa kadahilanang ito, kadalasang ginagamit ito kasama ng mga katangian ng klase o id, upang magbigay ng pangalan o kategorya sa div. Madalas din itong ginagamit kasama ng style attribute o gamit ang CSS style sheets, upang magbigay ng hitsura o disenyo sa div.
Ang isang div ay ginagamit upang ayusin at ayusin ang nilalaman ng isang web page, at upang ilapat ang mga katangian ng istilo dito. Sa isang div maaari kang lumikha ng isang kahon na naglalaman ng iba pang mga elemento, at maaaring ihanay, igitna, kulayan, may kulay, atbp. Ang format ay maaari ding gamitin sa gumawa ng mga column o row, upang ipamahagi ang nilalaman sa isang maayos at nababaluktot na paraan. Sa pangkalahatan, maaari rin itong magamit upang lumikha ng mga visual o interactive na epekto, tulad ng mga animation, mga transition, mga pagbabago, atbp.
Paano igitna ang isang imahe nang pahalang
Igitna ang isang imahe nang pahalang sa isang DIV nangangahulugang ihanay ang imahe sa gitna ng lapad ng DIV. Mayroong ilang mga paraan upang gawin ito, ngunit ang pinakakaraniwan ay ang mga sumusunod:
- Gamitin ang text-align: center property. Ang property na ito ay inilapat sa DIV element at nagiging sanhi ng lahat ng mga elemento sa loob ng DIV upang maging center align horizontally. Halimbawa:
- Gamitin ang margin: auto property. Inilapat ang property na ito sa elemento ng IMG at nagiging sanhi ng magkaparehong margin ang larawan sa kaliwa at kanan, na nakasentro ito nang pahalang. Para gumana ito, ang larawan ay dapat na may tinukoy na lapad at may uri ng bloke o may ipinapakitang property: block. Halimbawa:
- Gamitin ang transform property: translateX(). Inilapat ang property na ito sa elemento ng IMG at nagiging sanhi ng paggalaw ng imahe nang pahalang sa isang tiyak na distansya mula sa orihinal na posisyon nito. Upang igitna ito nang pahalang, kailangan mong ilipat ito sa kanan ng 50% ng lapad nito. Para gumana ito, ang larawan ay dapat na may tinukoy na lapad at nasa uri ng bloke o may ipinapakitang property: block. Halimbawa:
Paano igitna ang isang imahe nang patayo
Igitna ang isang imahe nang patayo sa isang DIV nangangahulugang ihanay ang imahe sa gitna ng taas ng DIV. Mayroong ilang mga paraan upang gawin ito, ngunit ang pinakakaraniwan ay ang mga sumusunod:
- Gamit ang vertical-align na property: gitna. Inilapat ang property na ito sa elemento ng IMG at nagiging sanhi ng pagkakahanay ng imahe nang patayo nang may paggalang sa baseline ng text. Para gumana ito, ang elemento ng DIV ay dapat may tinukoy na taas at ang elemento ng IMG ay dapat na nasa uri ng inline o may display: inline na property. Halimbawa:
- Gamitin ang margin-top at margin-bottom property. Ang mga pag-aari na ito ay inilalapat sa elemento ng IMG at nagiging sanhi ng imahe na magkaroon ng parehong itaas at ibabang mga margin, na nakasentro ito patayo. Upang gumana, ang elemento ng DIV ay dapat na may tinukoy na taas at ang elemento ng IMG ay dapat na may tinukoy na taas at may uri ng block o may display: block property. Halimbawa:
- Gamitin ang transform property: translateY(). Sa pagkakataong ito, inilapat ito sa elemento ng IMG at nagiging sanhi ng paglipat ng imahe nang patayo sa isang tiyak na distansya mula sa orihinal na posisyon nito. Upang igitna ito patayo, kailangan mong ilipat ito ng 50% ng taas nito pababa. Para gumana ito, ang elemento ng DIV ay dapat may tinukoy na taas at ang elemento ng IMG ay dapat na may tinukoy na taas at may uri ng block o may display: block property. Halimbawa:
Paano isentro ang isang imahe sa parehong mga palakol
Ang pagsentro ng isang imahe sa parehong mga palakol sa isang DIV ay nangangahulugan ihanay ang imahe sa gitna ng parehong lapad at taas ng DIV, ito ang pinakamasalimuot. Mayroong ilang mga paraan upang gawin ito, ngunit ang pinakakaraniwan ay ang mga sumusunod:
- Gamitin ang text-align: center property at ang vertical-align: middle property. Nalalapat ang mga katangiang ito sa elemento ng DIV at sa elemento ng IMG ayon sa pagkakabanggit, at nagiging sanhi ng pagkakahanay ng imahe sa parehong pahalang at patayo. Para gumana ito, ang elemento ng DIV ay dapat may tinukoy na taas at ang elemento ng IMG ay dapat na nasa uri ng inline o may display: inline na property. Halimbawa:
- Gamitin ang margin: auto property. Dito ito ay inilapat sa elemento ng IMG at ginagawang ang imahe ay may parehong mga margin sa lahat ng apat na panig, na nakasentro ito sa parehong mga palakol. Para gumana ito, ang elemento ng DIV ay dapat na may tinukoy na taas at ang elemento ng IMG ay dapat may tinukoy na lapad at taas at may uri ng block o may display: block property. Halimbawa:
- Gamitin ang transform: translate() property. Sa kasong ito, inilapat ito sa elemento ng IMG at nagiging sanhi ng paglipat ng imahe sa isang tiyak na distansya mula sa orihinal na posisyon nito sa parehong mga palakol. Upang igitna ito, kailangan mong ilipat ito ng 50% ng lapad nito sa kanan at 50% ng taas nito pababa. Para gumana ito, ang elemento ng DIV ay dapat na may tinukoy na taas at ang elemento ng IMG ay dapat may tinukoy na lapad at taas at may uri ng block o may display: block property. Halimbawa:
Igitna ang anumang larawan
Maaaring maging kapaki-pakinabang ang pagsentro ng larawan sa isang DIV upang mapabuti ang hitsura at organisasyon ng iyong website, at upang i-highlight ang larawang gusto mong ipakita. Ang pagsentro ng isang imahe sa isang DIV ay hindi mahirap, ngunit ito ay depende sa ilang mga kadahilanan tulad ng uri ng imahe, ang laki ng DIV, ang estilo ng DIV, atbp.
Sa artikulong ito Ipinaliwanag namin kung paano isentro ang isang imahe sa isang DIV gamit ang HTML at CSS, na mga programming language na ginagamit upang lumikha at magdisenyo ng mga web page. Nagpakita kami sa iyo ng ilang paraan at halimbawa para makapili ka ang pinakaangkop sa iyo.
Umaasa kaming nagustuhan mo ang artikulong ito at natutunan mo kung paano isentro ang isang larawan sa isang DIV. Kung mayroon kang anumang mga katanungan o mungkahi, mag-iwan sa amin ng komento. Maaari mo ring ibahagi ang artikulong ito sa iyong mga kaibigan o pamilya na gusto rin ng HTML o CSS. Tara na sa trabaho at programa!