bragboy bragboy - 10 days ago 5
CSS Question

Need to center align the image in CSS

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"/>
</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.

Answer
<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>
<div>&nbsp;<img src="placeholder.gif" width="90" height="80" />&nbsp;</div>
<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>

div {
    float: left;
    text-align: center;
    width: 150px;
    height: 150px;
    margin: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    line-height: 148px;
}

div img {
    margin-top: expression(( 150 - this.height ) / 2);
}

html>body div img { /*hidden from IE 5-6 */
    margin-top: 0; /* to clean up, just in case IE later supports valign! */
    vertical-align: middle;
}

Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.

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

Works like a charm.

Comments