我需要将一些绝对定位的元素相对于容器居中。阅读大量文章后,似乎像下面这样的结构就可以完成工作。唯一的问题是与IE7。在IE7上,item1(div元素)的宽度以某种方式缩小为0(即使宽度已明确指定)。 item2在所有浏览器中均可正常运行。我的问题是,在这种情况下,为什么IE7无法使用块元素的宽度样式?您知道任何解决方法或解决方法吗?

<div style="position: relative; width: 500px; height: 400px; border: thin dotted green;">
    <div style="position: absolute; top: 0px; left: 50%; height: 0px;">
        <div id="item1" style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px; height: 30px;"></div>
    </div>
    <div style="position: absolute; top: 50px; left: 50%; height: 0px;">
        <input id="item2" type="button" value="Button" style="position: relative; display: inline-block; left: -50%;">
    </div>
</div>


我用上面的代码做了一个jsfiddle。感谢您的输入。

最佳答案

添加min-width = 300px;所以代码行看起来像

<div style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px;min-width:300px; height: 30px;"></div>

关于html - 需要帮助将绝对定位的DIV水平居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4636421/

10-12 00:00
查看更多