2

I want to place an image inside a div 200x200px and also the image must be centered horizontally and vertically.

I start with SO question "Align image in center and middle within div" and try out the first answer:

#over img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

It doesn't work... see jsfiddle

Then, I continue with the second answer:

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

It doesn't work... see jsfiddle

Finally, I try this:

display: table-caption;
vertical-align: middle;
margin-left: auto;
margin-right: auto;

and it seems to work! see jsfiddle

Can somebody explain to me why the first two approaches fail to keep the outer div to 200x200px? I see very similar code snippets and can't understand what really makes the difference. Thank you in advance...

Community
  • 1
  • 1
tgogos
  • 23,218
  • 20
  • 96
  • 128
  • Second example seems to work if you use height instead of line-height (which I don't know why you'd want to use in the first place). – j08691 Jul 26 '14 at 19:49

3 Answers3

2

Change line-height to height and they will respect your wishes :)

Simplified it a bit for you by using background-image and remove the other element.

background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
background-repeat: no-repeat;
background-position: center center;

see here: http://jsfiddle.net/NeN2t/2/

Brunis
  • 1,073
  • 8
  • 12
  • The `background` approach was what I tried first but changed my mind because I wanted to use lazy loading with echo.js – tgogos Jul 26 '14 at 19:51
  • don't use table-caption for that, see my fiddle how to center images in a div, now you can even fade it and write over it :) – Brunis Jul 26 '14 at 19:52
  • Ok, you could still use a javascript function to call on page load to insert the image late. all document resources are always loaded at the end of the document. – Brunis Jul 26 '14 at 19:53
1

Second answer - you forget to wrap table-cell in table, or select height for container.

<div class="wrap">
<div style="display:table-cell; vertical-align:middle; text-align:center">
    <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
</div>
</div>

see JsFiddle DEMO

And I have one more method, for modern browsers, may be it help you. DEMO for modern browsers this method is more useful when you do responsive design or fluid design.

CroaToa
  • 900
  • 2
  • 14
  • 36
0

Use positioning instead of table-cell. The following worked for me...

With zoom to the center of the image (image fills the div):

    div{
        display:block;
        overflow:hidden;
        width: 70px; 
        height: 70px;  
        position: relative;
    }
    div img{
        min-width: 70px; 
        min-height: 70px;
        max-width: 250%; 
        max-height: 250%;    
        top: -50%;
        left: -50%;
        bottom: -50%;
        right: -50%;
        position: absolute;
    }

Without zoom to the center of the image (image does not fill the div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
ThomasAFink
  • 1,257
  • 14
  • 25