Kuvat ovat tärkeä osa mitä tahansa verkkosovellusta. Useiden kuvien sisällyttämistä verkkosovellukseen ei yleensä suositella, mutta on tärkeää käyttää kuvia siellä, missä niitä tarvitaan. CSS auttaa meitä hallitsemaan kuvien näyttämistä verkkosovelluksissa.
Kuvan kohdistaminen tarkoittaa kuvan sijoittamista keskelle, vasemmalle ja oikealle. Voimme käyttää kellua omaisuutta ja tekstin tasaus ominaisuus kuvien kohdistamiseen.
Jos kuva on div-elementissä, voimme käyttää tekstin tasaus ominaisuus kuvan tasaamiseksi div-osassa.
Esimerkki
Tässä esimerkissä kohdistamme kuvat käyttämällä tekstin tasaus omaisuutta. Kuvat ovat div elementissä.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Testaa nyt Lähtö
Float-ominaisuuden käyttäminen
CSS float -ominaisuus on paikannusominaisuus. Sitä käytetään elementin työntämiseen vasemmalle tai oikealle, jolloin muut elementit voivat kietoutua sen ympärille. Sitä käytetään yleensä kuvien ja asettelujen kanssa.
Elementit kelluvat vain vaakasuunnassa. Joten on mahdollista vain kellua elementtejä vasemmalle tai oikealle, ei ylös tai alas. Kelluvaa elementtiä voidaan siirtää niin pitkälle vasemmalle tai oikealle kuin mahdollista. Yksinkertaisesti se tarkoittaa, että kelluva elementti voi näkyä äärivasemmalla tai äärioikealla.
Esimerkki
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Testaa nyt Lähtö
