- Paano Igitna ang isang Imahe sa Div Pahalang?
- Margin Property
- Flexbox Module
- Grid View Layout
- Katangian ng Posisyon
Paano Igitna ang isang Imahe sa Div Pahalang?
Maaaring gamitin ng developer ang margin property, Flexbox module, Grid View layout, at Position attribute para igitna ang isang imahe sa div nang pahalang. Sundin ang gabay sa ibaba upang i-gitna ang larawan nang pahalang sa div tag.
Ipagpalagay natin, mayroong isang div kung saan inilalagay ang imahe sa ganitong paraan sa HTML file:
< div klase = 'ugat' >
< img src = '../book.jpg' taas = 'limampung%' lapad = 'limampung%' klase = 'larawan' >
< / div >
Ang imahe ay nakakakuha ng lapad at taas na 50% at isang klase ng 'imahe'.
Gamit ang Margin Property
Ang mga gumagamit ay maaaring magdagdag ng espasyo sa paligid ng mga elemento ng HTML gamit ang margin property. Nagtatalaga ito ng margin ayon sa magagamit na espasyo pagkatapos baguhin ang laki ng screen ng window. Halimbawa, itinatakda ang margin-kaliwa at kanan sa auto, at ang display property ay nakatakdang harangan:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Pagkatapos isagawa ang halimbawa sa itaas, ganito ang hitsura ng webpage:
Ang output sa itaas ay nagpakita na ang imahe ay nasa gitna na ngayon.
Gamit ang Flexbox Module
Ang ' flexbox ” ay isang module na naglalaman ng kumpletong hanay ng mga katangian. Sa aming kaso, piliin ang klase ng elemento ng ugat at gamitin ang flex bilang isang halaga ng katangian ng pagpapakita. Itakda ang center bilang halaga para sa ' justify-content 'at' align-item ' ari-arian:
.ugat {display: flex;
bigyang-katwiran- nilalaman : gitna;
align-item: center;
background- kulay : asul;
}
Ganito ang hitsura ng webpage, pagkatapos isagawa ang code:
Ang output sa itaas ay nagpapakita na ang imahe ay ipinapakita sa gitna ng div na mayroong kulay ng background na nakatakda sa 'asul'.
Gamit ang Grid View Layout Module
Ang layout ng grid view ay may 12 column, at ang kabuuang lapad ay nakatakda sa 100% at inilalagay nito ang bawat elemento sa isang partikular na posisyon sa webpage:
.ugat {display: grid;
place-item: center;
}
Sa snippet ng code sa itaas, ang value ng 'grid' ay itinalaga sa display property. Habang ginagamit ang 'place-item' bilang shorthand para sa 'justify-content' at 'align-item' na mga katangian:
Ang output ay nagpapatunay na ang imahe ay nasa gitna ng div gamit ang grid method:
Paggamit ng Position Attribute
Sa pamamagitan ng pagtatakda ng posisyon ng root class sa relative value at ang image class sa absolute value. Maaaring ipakita ang larawan sa gitna ng div:
.ugat {posisyon: kamag-anak;
}
.larawan {
lapad : 700px;
taas : 500px;
posisyon: ganap;
kaliwa: limampu %;
ibahin ang anyo: translateX ( - limampu % ) ;
}
Ang Larawan ay inilipat sa kaliwa ng '50%' at pagkatapos ay i-transform pabalik sa '-50%' sa X-axis. Ipinapakita nito ang imahe sa gitna ng div nang pahalang:
Iyon ay kung paano ang imahe ay maaaring nakasentro sa div nang pahalang.
Konklusyon
Upang pahalang na itakda ang larawan sa isang elemento ng div, gamitin ang “ margin ”, “ flex module ”, “ layout ng grid 'at' posisyon ' ari-arian. Ang ' margin ” Ang ari-arian ng kaliwa at kanan ay nakatakda sa auto. Itinakda ng 'flex module' at 'grid Layout' ang display sa flex at grid ayon sa pagkakabanggit at gamitin ang ' bagay sa lugar “ pag-aari upang isentro ang imahe. Itinatakda ng property ng posisyon ang value na nauugnay sa root class at absolute sa image class at gumagamit ng 'kaliwa' at 'transform' na mga katangian. Matagumpay na naipakita ng blog na ito kung paano igitna ang mga larawan sa isang div nang pahalang.