CSS auttaa meitä hallitsemaan kuvien näyttämistä verkkosovelluksissa. Kuvien tai tekstien keskittäminen on yleinen tehtävä CSS:ssä. Keskittääksesi kuvan, meidän on asetettava arvo marginaali vasen ja marginaali-oikea kohtaan auto ja tee siitä lohkoelementti käyttämällä näyttö: lohko; omaisuutta.
Jos kuva on div-elementissä, voimme käyttää tekstin tasaus: keskellä; ominaisuus kuvan tasaamiseksi divisioonan keskelle.
The elementin sanotaan olevan rivielementti, joka voidaan helposti keskittää käyttämällä tekstin tasaus: keskellä; CSS:n ominaisuus sen sisältävään pääelementtiin.
Huomautus: Kuvaa ei voi keskittää, jos leveydeksi on asetettu 100 % (täysi leveys).
Voimme käyttää pikakirjoitusominaisuutta marginaali ja aseta se päälle auto kuvan kohdistamiseen keskelle sen sijaan, että käytät marginaali vasen ja marginaali-oikea omaisuutta.
Katsotaanpa, kuinka kuva keskitetään soveltamalla tekstin tasaus: keskellä; ominaisuus sen pääelementtiin.
Esimerkki
Tässä esimerkissä kohdistamme kuvat käyttämällä tekstin tasaus: keskellä; omaisuutta. Kuva on div-elementissä.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Testaa nyt Lähtö
Esimerkki
Nyt käytämme marginaali vasen: auto; marginaali-oikea: auto; ja näyttö: lohko; ominaisuuksia kuvan tasaamiseksi keskelle.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Testaa nyt Lähtö
