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.

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

kiskep

>> 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

kiskep

>> 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

kiskep

>> 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

kiskep kiskep kiskep

>> 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

kiskep kiskep kiskep kiskep

>> 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

kiskep kiskep kiskep kiskep

>> 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

kiskep kiskep kiskep

>> 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.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!