我有一个居中对齐的 div:
<div id="container" style="position:absolute; top:0px; left:50%; margin-left:-500px; width:1000px;"></div>
作为这个解决方案 Trying to center div horizontally and vertically in screen建议。
问题是,如果客户端的窗口宽度(在 FF 15.0.1 中试过)小于 1000px,则水平滚动条将不允许显示 div 的左侧。
有没有纯html/css的方式解决?
最佳答案
嗯。您不能调整客户端窗口的大小。
您可以做的一件事是避免将父 div 的宽度设置为 1000px
<div id="parent" style="min-width:1000px;">
<div id="container" style="position:absolute; top:0px; left:50%;
margin-left:-500px; width:1000px;"></div>
</div>
注意:
您可能需要将 html 和 body 标记的宽度设置为 min-width=100%
更新:
<html style="min-width: 100%; background-color:Gray;">
<body style="min-width: 100%; background-color:White;">
<div id="parent" style="min-width: 1000px; position:relative;">
<div id="container" style="position: absolute; top: 0px; left: 50%; margin-left: -500px;
width: 1000px; border: 1px solid red; height: 10px;">
1 2 3 4 5
</div>
</div>
</body>
</html>
我错过了 position:relative
来描述。此代码有效。
关于html - 使用小窗口的负边距左技巧修复中心对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15009763/