我需要将一些相对于容器的绝对定位元素居中。在阅读了大量文章之后,似乎像下面这样的结构就可以完成这项工作。唯一的问题是IE7。在 IE7 上,item1(div 元素)的宽度以某种方式缩小为 0(即使在其上明确指定了宽度)。 item2 在所有浏览器中都能正常工作。我的问题是为什么在这种情况下 IE7 不支持 block 元素的宽度样式?您知道任何解决方法或修复方法吗?
<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用上面的代码。感谢您的输入。
最佳答案
添加最小宽度=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/