- Kuinka keskittää kuva Divissa vaakasuunnassa?
- Marginaaliomaisuus
- Flexbox-moduuli
- Ruudukkonäkymän asettelu
- Aseman ominaisuus
Kuinka keskittää kuva Divissa vaakasuunnassa?
Kehittäjä voi käyttää marginaaliominaisuutta, Flexbox-moduulia, ruudukkonäkymän asettelua ja sijainti-attribuuttia keskittääkseen kuvan div-osassa vaakasuunnassa. Noudata alla olevia ohjeita kuvan keskittämiseksi vaakasuoraan div-tunnisteessa.
Oletetaan, että HTML-tiedostossa on div, jossa kuva sijoitetaan tällä tavalla:
< div luokkaa = 'juuri' >
< img src = '../book.jpg' korkeus = 'viisikymmentä%' leveys = 'viisikymmentä%' luokkaa = 'kuva' >
< / div >
Kuvan leveys ja korkeus on 50 % ja 'kuva' -luokka.
Marginaali-ominaisuuden käyttäminen
Käyttäjät voivat lisätä tilaa HTML-elementtien ympärille marginaaliominaisuuden avulla. Se määrittää marginaalin käytettävissä olevan tilan mukaan ikkunanäytön koon muuttamisen jälkeen. Asettaa esimerkiksi marginaalin vasemmalle ja oikealle asetukseksi automaattinen, ja näyttöominaisuuden on asetettu estämään:
img {
näyttö: lohko;
marginaali vasen: auto;
marginaali-oikea: auto;
}
Yllä olevan esimerkin suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tulos on näyttänyt, että kuva on nyt keskellä.
Flexbox-moduulin käyttö
' flexbox ” on moduuli, joka sisältää täydellisen joukon ominaisuuksia. Valitse tässä tapauksessa juurielementtiluokka ja käytä näyttöominaisuuden arvona flexiä. Aseta keskikohta arvoksi ' perustele-sisältö ' ja ' kohdista kohteet ”ominaisuudet:
.root {näyttö: flex;
perustella- sisältö : keskus;
kohdista kohteet: keskellä;
tausta- väri : sininen;
}
Verkkosivu näyttää tältä koodin suorittamisen jälkeen:
Yllä oleva tulos osoittaa, että kuva näkyy div-osan keskellä taustavärin ollessa 'sininen'.
Ruudukkonäkymän asettelumoduulin käyttäminen
Ruudukkonäkymän asettelussa on 12 saraketta, ja kokonaisleveydeksi on asetettu 100 % ja se sijoittaa jokaisen elementin tiettyyn kohtaan verkkosivulla:
.root {näyttö: ruudukko;
paikkaesineet: keskus;
}
Yllä olevassa koodinpätkässä 'grid'-arvo on määritetty näytön ominaisuudelle. Vaikka 'paikkakohtaa' käytetään lyhenteenä 'justify-content'- ja 'align-items' -ominaisuuksille:
Tulos vahvistaa, että kuva on div-osan keskellä ruudukkomenetelmällä:
Sijaintimääritteen käyttö
Asettamalla juuriluokan sijainti suhteelliseksi arvoksi ja kuvaluokan absoluuttiseksi arvoksi. Kuva voidaan näyttää div-osan keskellä:
.root {asema: suhteellinen;
}
.kuva {
leveys : 700px;
korkeus : 500px;
sijainti: absoluuttinen;
vasemmalle: viisikymmentä %;
muunnos: translateX ( - viisikymmentä % ) ;
}
Kuva siirretään '50%':n vasemmalle puolelle ja muunnetaan sitten takaisin '-50%':ksi X-akselilla. Se näyttää kuvan div-osan keskellä vaakasuunnassa:
Näin kuva voidaan keskittää diviin vaakasuunnassa.
Johtopäätös
Aseta kuva vaakasuunnassa div-elementissä käyttämällä ' marginaali ”, “ flex-moduuli ”, “ ruudukon asettelu ' ja ' asema ” ominaisuuksia. ' marginaali ”vasemman ja oikean ominaisuus on asetettu automaattiseksi. 'Flex module' ja 'grid Layout' määrittävät näytön joustavaksi ja ruudukoksi ja käyttävät ' paikka esine ' ominaisuus kuvan keskittämiseksi. Sijaintiominaisuus asettaa arvon suhteessa juuriluokkaan ja absoluuttisen arvon kuvaluokkaan ja käyttää 'left'- ja 'transform'-ominaisuuksia. Tämä blogi on onnistuneesti osoittanut, kuinka kuvat keskitetään div-osaan vaakasuunnassa.