bragboy bragboy - 1 year ago 67
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;"

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 Source
<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.

Works like a charm.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download