Question

I have this code to center an image between two horizontal lines.

CSS:

.line-scale-left {
    position: absolute;
    background-color: #000000;
    border: #000000;
    height: 4px;
    top:190px;
    width: 25%;
    left: 250px;
}

.line-scale-right {
    position: absolute;
    background-color: #000000;
    border: #000000;
    height: 4px;
    top:190px;
    width: 25%;
    right: 250px;
}

.center-img {
    display:block;
    margin-left:auto;
    margin-right:auto;} 
}

The HTML code looks like this <hr class="line-scale-left" /><img src="http://fleminglaw.biz/balance.gif" align="center" class="center-img" width="82px" height="61px" /><hr class="line-scale-right" />

Now I’ve looked at the page on multiple screens at various resolutions and it has come out fine on all of the desktops and laptops I’ve looked at aside from an issue with the lines running into each other when minimized.

It has worked fine in all browsers as well except for IE 8 and 9, the lines and the rest of the page looks fine except I can’t get this image to center at all in IE and compatibility view does not help or change it one bit.

Can someone help a noob out and tell me how to get images to center in IE.

Answer 1

Wrap this in a containing div if you need to position it elsewhere.

.line-scale-left{
    float: left;
    width: 25%;
    margin-top: 30px;
}

.line-scale-right{
    width: 25%;
    float: left;
    margin-top: 30px;   
}

.center-img{    
    display:block;
    float: left;
}