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*/
}

修改

如果您仍希望以绝对位置水平居中对齐，可以这样做demo

.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;。只需添加{{1}}

即可

Answer 3

你只需要将父div居中。

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