1

I have the following code in my CSS

.box {
    position: relative;
    min-height: 113px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.box img {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-width: 202px;
    width: 100%;
    height:auto;
}

<div class="box">image goes here</div>

For some reason this works perfectly for Chrome, Safari and IE.... but in Firefox the image does not center in its "BOX" container.

Does firefox not support this method?

Fiddle

Oriol
  • 274,082
  • 63
  • 437
  • 513
WebbySmart
  • 666
  • 6
  • 12
  • what do you mean by "center"?! center vertically or horizontally?! In IE,FF and Chrome its looks like the same for me. – Masoud Sep 10 '14 at 20:14
  • Sorry.Vertically center. Have a look at my Fiddle in Firefox and then Chrome. You will see what I mean. – WebbySmart Sep 10 '14 at 20:15
  • try http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working/23207658#23207658 – kornieff Sep 10 '14 at 20:21
  • @user3298192, It exactly the same. can you provide a picture of difference ?! – Masoud Sep 10 '14 at 20:23
  • Kornieff it worked. Thanks. Have a look at the updated version. http://jsfiddle.net/WebbySmart/hy92kgh0/4/ – WebbySmart Sep 10 '14 at 20:27

0 Answers0