Question

I’m trying something that should be pretty easy but i can’t figure out how to make it.

I have html source like this:

<div class="product">
  <img src="product123.png" />
</div>`

And some css:

.product {
    width: 460px;
    height: 460px;
}

.product img {
      margin: auto;
      display: block;
}

My image is well horizontally-aligned but not vertically. I tried with some position: relative; / bottom: 0; feature but it didn’t change anything…

Any idea guys ?

Thank you for your help !

PS: I found this solution center <IMG/> inside a <DIV> with CSS but I’d rather prefer keeping my HTML like this and it seems like unbelievable to not be able to do it “my” way.

Answer 1

Try this – http://jsfiddle.net/tG9UK/

.product {
    width: 460px;
    height: 460px;

    display: table-cell;
    vertical-align: middle;
}