Need to center align the image in CSS

Question

Hi,

I am trying to center align (both horizontally and vertically) the image inside a div box in html and css. I am not able to center align it. Here is my below code.

<div style="float:left;margin: 10px" >
    <div style="border:1px solid gray;width: 60px;height: 60px;text-align:center;">
        <img style="max-height: 60px;max-width: 60px;" 
        src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/&gt;
    </div>
</div>

The image is getting aligned to the top. I tried using vertical-align:middle inside the img tag but its of no use.

Can someone help me? Thanks.

here is the link for it : http://bragadeesh.blogspot.com/2010/03/stack-overflow-test.html

Answer 1

use text-align:center to horizontal align...no css tag in vertical align.

Answer 2

 <div style="float:left;margin: 10px; height: 199px; width: 242px;text-align:center; vertical-align:middle;" >
        <div style="border:1px solid gray;width: 60px;height: 60px;">
            <img  style="max-height: 60px;max-width: 60px; height: 58px; width: 47px;"             

                src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/&gt;

        </div>
    </div>

Answer 3

if you want to just show the Image in center then just try this

 <div style="background-position: center center; margin: 10px; text-align:center; background-image: url('http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg'); background-repeat: no-repeat;" 
            class="style1" >

 </div>

Answer 4

I tried my own solution by adding display:table-cell and vertical-align:middle. Its working fine in FireFox. But miserably failing in IE :(

<div style="border:1px solid gray;width: 60px;height: 60px;display:table-cell; vertical-align:middle;text-align:center;">
  <img style="max-height: 60px;max-width: 60px; " src="http://www.google.com/intl/en_ALL/images/logo.gif"/&gt;
</div>

Some pointers needed.

Answer 5

http://snipplr.com/view/24428/center-an-image-inside-a-div-vertical-and-horizontal-without-knowing-the-images-size/

Works like a charm.

Answer 6

You should consider using the vertical-align:middle and the text-align:center for this. That will solve the problem i guess.