在IE中的两行之间居中图像

时间:2011-07-20 15:53:24

标签: css internet-explorer internet-explorer-8 cross-browser internet-explorer-9

我有这个代码将图像置于两条水平线之间。

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;} 
}

HTML代码如下所示<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" />

现在我已经在不同分辨率的多个屏幕上查看了这个页面,除了最小化时线条相互碰撞的问题之外,我所看到的所有台式机和笔记本电脑都很好。 / p>

除了IE 8和9之外,它在所有浏览器中都运行良好,线条和页面的其余部分看起来很好,除了我无法在IE中将此图像置于中心,兼容性视图无效或改变一点。

有人可以帮助一个菜鸟并告诉我如何让图像以IE为中心。

1 个答案:

答案 0 :(得分:1)

如果您需要将其放在其他位置,请将其包含在包含div中。

.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;
}