Kép középre igazítása a div-en belül? (részletek)

margin: auto; önmagában nem elég.

ahhoz hogy ez menjen display paramétert is be kell állítani, pl. block -ra.

A szó, amit be szeretnél írni a googleba:

flexbox

Ha egy flexboxnak csak 1 gyereke van és annak azt mondod, hogy

margin: auto

akkor az középen lesz horizontálisan és vertikálisan is.

És a flexboxok egymásba is ágyazhatók. Szóval csinálsz egy nagyot, bele 3 kicsit, azokba meg a képeket.

Ez nagyon jó:

[link]

flexbox... persze... ahhoz hogy egy képet középre rakjunk :D ember...

Ilyen egyszerű:

<div id="box1" style="width:345px;float:left;height:500px;margin-right:10px;paddi

ng:10px 10px;">

<div class="img-wrapper" style="text-align:center>

<img src="foo/bar.jpg">

</div>

</div>

Ja igen, és a codepen keresőjébe is érdemes beírni, hogy flexbox. Csoda dolgok kerülnek elő.

Kicsit el van dugva, a főoldalon a jobb felső sarokban van egy nagyító ikon.

#3

Csak azt nem írtad meg, hogy ahhoz az img-wrapper-hez milyen CSS tartozik. Gondolom, az lenne a lényeg.

Amúgy meg igen, nem hiszem, hogy a flexboxnál van egyszerűbb, könnyebben-gyorsabban implementálható megoldás erre.

2 sor a CSS fájlba

A szülőnek

display: flex

a gyerekeknek

margin: auto

Ennyi az egész.

A text-align property csak horizontálisan igazít középre, vertikálisan nem.

Van vertical-align property is, de az csak inline elemekre és táblázat mezőire használható.