css - CSS 中心位置绝对图像 Internet Explorer

Question

我有以下 css 在 chrome 和 safari 中以绝对定位的图像为中心

.productImg {
     width: 100%;
     position: absolute;
     left: 50%;
     margin-left: -50%;
}

但是在 Internet Explorer 7 中，这不会使图像居中。相反，图像保留在容器 div 的左侧。我的问题是，我怎样才能使上面的脚本在 ie7 中工作？

Answer 1

如果您的图像是其容器的宽度并且您希望它居中，为什么不将其对齐到左侧呢？

.productImg 
{
    width: 100%;
    position: absolute;
    left: 0;
}

Answer 2

你试过margin: 0 auto; text-align: center;吗？这是水平居中的最佳方式。

为此，您应该像这样包装一个 div：

<div class="hCenter">
<div class="productImg"></div>
</div>

那么css将如下所示：

.hCenter{
position: relative;
margin: 0 auto;
text-align: center;
}
productImg{
/*now you can align position absolute*/
/*other code in here*/
}

编辑

如果您仍然希望以绝对位置水平居中对齐，您可以像这个演示一样

.productImg {
     width: 50%;
     position: absolute;
     right: 25%; /* half of the width percentage*/
    background-color: red;
    height: 200px;
}

编辑 1

如果你的父 div 是绝对定位的，那么你不需要设置position: absolute你的.productImg. 只需添加margin: 0 auto; text-align: center;

Answer 3

您只需要将父 div 居中。

div {
    width: 300px /* give div a width */
    margin: 0 auto;
}