我需要将一些绝对定位的元素相对于容器居中。阅读大量文章后,似乎像下面这样的结构就可以完成工作。唯一的问题是与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/