CSS képigazítás (Kép igazítása középre, balra, jobbra CSS-el)
Ebben a cikkben bemutatjuk, hogy milyen képigazítási lehetőségeink vannak. Megmutatjuk, hogy hogyan igazíthatunk egy képet bal-, jobb oldalra vagy középre, sőt még azt is, hogy hogyan helyezhetünk el több képet egymás mellett vagy alatt.
Ebben a cikkben csak a képigazítással foglalkozunk, azaz azzal, hogy hogyan szabhatjuk meg CSS segítségével azt, hogy hol helyezkedjen el egy kép a weboldalunkon, ha érdekel, hogy hogyan hozhatsz létre egy képet HTML-ben, akkor itt olvashatsz róla.
Kép középre igazítása CSS segítségével
Kezdjük talán a leggyakrabban feltett kérdéssel: hogyan lehet középre igazítani egy képet CSS segítségével?
CSS kód
margin-left: auto;
margin-right: auto;
display: block;
Code language: HTTP (http)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
A fent látható kódot kell alkalmazni a HTML-ben létrehozott képre. Megadjuk, hogy a bal oldali és a jobb oldali margó meghatározás automatikus legyen, ennek köszönhetően a böngészők ugyanakkora margót állítanak be mindkét oldalra, így kerül a kép középre.
Kép igazítása balra
Az elején egy kicsit hazudtam, amikor azt mondtam, hogy megtanítom, hogy hogyan kell balra igazítani a képet. Na jó, ne is nevezzük hazugságnak, szimplán elhallgattam azt a tényt, hogy egy HTML-ben létrehozott kép alapértelmezetten balra van igazítva, azaz nincs vele semmilyen teendőnk, ha azt szeretnénk, hogy ezen az oldalon jelenjen meg.
CSS kód
/* Nem írok ide CSS kódot. */
Code language: JSON / JSON with Comments (json)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Kép igazítása jobb oldalra
Jobb oldalra történő igazításhoz már kell egy kicsit trükköznünk, de nem kell semmilyen nagy dologra gondolni.
CSS kód
margin-left: auto;
margin-right: 0;
display: block;
Code language: HTTP (http)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ugyebár az középre igazításnál is a margókkal játszottunk, most is ezt tettük. Beállítottuk, hogy a jobb oldali margó 0 legyen, azaz azon az oldalon a lap széléhez fog igazodni a kép.
Hogyan helyezzünk el több képet egymás mellett?
A következő megvizsgálandó esetnél az a célunk, hogy több képet helyezzünk el egymás mellett. Nézzük meg kezdésnek, hogy mi történik, ha szimplán beillesztünk három képet egymás után HTML-ben.
HTML kód
<img src="https://webiskola.hu/kiskep.jpg">
<img src="https://webiskola.hu/kiskep.jpg">
<img src="https://webiskola.hu/kiskep.jpg">
Code language: HTML, XML (xml)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Láthatjuk, hogy a képek ilyenkor alapértelmezetten pontosan úgy jelennek meg, ahogy mi azt szerettük volna. Fontos megjegyezni, hogy ezek a képek azért jelennek meg egymás mellett, mert nagyon kicsi a méretük, így könnyedén elférnek egymás mellett. De mi a helyzet, ha nagyobb vagy több képet szeretnénk elhelyezni a weboldalon egymás mellett?
CSS kód
<img src="https://webiskola.hu/kiskep.jpg">
<img src="https://webiskola.hu/kiskep.jpg">
<img src="https://webiskola.hu/kiskep.jpg">
<img src="https://webiskola.hu/kiskep.jpg">
Code language: HTML, XML (xml)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ha szimplán több képet illesztünk be és nem fér ki a sorba, akkor így fog festeni, ahogy fentebb láthatjuk. Ilyenkor kell az alábbit alkalmaznunk:
CSS kód
div {
display: flex;
}
Code language: CSS (css)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ebben az esetben az összes képet bele kell helyeznünk egy div-be, majd a div-re alkalmaznunk kell a fenti display: flex; kódot.
Hogyan helyezhetjük el több képet egymás alá?
Most pedig pont az ellenkezőjét szeretnénk elérni, mint az előbb. Azt szeretnénk, ha a képek nem egymás mellett, hanem egymás alatt jelennének meg.
CSS kód
div {
display: grid;
}
Code language: CSS (css)Eredmény
>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<
Ezt úgy érhetjük el, hogy a képeket elhelyezzük egy div-ben, majd a div-re alkalmazzuk a fent látható CSS kódot.
