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

Ha horizontálisan akarod középre helyezni, akkor elég a szülő div-re egy text-align:center;

Mivel a kép alapból inline-block típus így egész egyszerű lesz.

http://www.w3schools.com/tags/tag_img.asp

Ellenben, ha már vertikálisan is középre akarod helyezni, akkor gondban leszel. Illetve a responsive nézeten sem feltétlenül fog úgy kinézni, ahogy szeretnéd.

Sajnos a vertikális pozícionálás már csak topra és bottomra működik a middle valamiért kikerült a böngészőkből.

A legjobb és legyszerűbb megoldás, hogyha ilyesmit akarsz, hogy a képet berakod háttérképként a divnek, és akkor rettentő egyszerű középre igazítani vagy amit akarsz. Még animálni is egyszerűbb.

<div class="myimg-box" style="background-image:url('http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg');"></div>

CSS:

.myimg-box {

display:block;

margin:30px auto;

width:300px;

height:300px;

background-position:center;

background-size:200px auto;

background-repeat:no-repeat;

transition: background-size 0.5s linear;

background-color:#ddd;

}

.myimg-box:hover {

background-size:300px auto;

transition: background-size 0.5s linear;

}

//======================

background-size

http://www.w3schools.com/cssref/pr_background-position.asp

background-size

http://www.w3schools.com/cssref/css3_pr_background-size.asp

//======================

Másik példa (amit az elején említettem)

<div class="myimg-box2">

<img src="http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg" alt="" />

</div>

CSS

.myimg-box2 {

display:block;

width:300px;

height:300px;

text-align:center;

background-color:#ddd;

margin:30px auto;

padding:25px 0 0 0;

box-sizing:border-box;

}

.myimg-box2 img {width:200px;height:auto;transition:width 0.5s linear;}

.myimg-box2:hover img {width:300px;transition:width 0.5s linear;}

//======================

Dobd őket ide: http://codepen.io/pen/ és rögtön meg is nézheted!

---

Anonymus

Az img tag-re display: block;

és margin: 0px auto;

Ekkor viszíntesen középre kerül a diven belül is, ÉS külön a divet is tudod mozgatni, amiben a kép van. Már amennyiben "csak" viszintesen kellett igazítani.