在 IE 中将图像居中在两行之间答案

【问题标题】：Centering an image between two lines in IE在 IE 中将图像居中在两行之间
【发布时间】：2011-07-21 01:05:15
【问题描述】：

我有这段代码可以在两条水平线之间居中图像。

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

现在，我在多个屏幕上以不同的分辨率查看了该页面，并且在我查看过的所有台式机和笔记本电脑上都显示良好，除了最小化时线条相互碰撞的问题。

除了 IE 8 和 9 之外，它在所有浏览器中都运行良好，线条和页面的其余部分看起来都很好，除了我无法让该图像在 IE 中居中并且兼容性视图无济于事或稍微改一下。

谁能帮助一个菜鸟，告诉我如何让图像在 IE 中居中。

【问题讨论】：

我想帮忙，但你能把你的代码放在jsfiddle.net吗？
当然没问题。 Here is a link to it。它在 JSfiddle 中的行为不正确，因为要在其中显示页面的屏幕很小，这对于移动网站和最小化时也是一个问题，但我稍后会解决这个问题。我真的只是希望图像居中并且此时在所有最大化的浏览器中看起来都很好。

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

【解决方案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;
}

【讨论】：