Centered image in a DIV not responding to variable height and width

Question

I am using this code to center an image in a 100% DIV.

    #mainlog{width:100%;margin-top:15px; height:40%;background-image:url("../images/mbg.png");border-width:0px 0px 5px 0px;border-style:solid; border-color:#f28438}
    #mainlog a{position: relative;left: 50%;float: left;}
    #mainlog img{position: relative;left: -50%;float: left;}

Here is the HTML code:

    <div id="mainlog">
    <a href="index.php"><img src="images/logo.png" height="100%" width="" alt="Escener Technologies"/></a></div>

So what the actual problem is: You can see here http://m.escener.com/ The center image is not stretching to 100% height of the external DIV. Please help.

Answer 1

Your image height is of 200px and the div height is 40% so your image are not going to take that in a larger screen.

Try to set a fixed height to your div

#mainlog { 
  height:200px;
}

Edit

Now i see what the problem is; you're ussing float:left for the a and the img tags. With this you can resolve your problem:

1. Remove the float and left properties for the a and img .
2. Add to your #mainlog container text-align:center on the CSS.
3. Add to your #mainlog a display:inline-block on the CSS.

Those lines will center your img and make it fits the container.