gpt4 book ai didi

html - 使用小窗口的负边距左技巧修复中心对齐

转载 作者:太空宇宙 更新时间:2023-11-04 04:43:19 25 4
gpt4 key购买 nike

我有一个居中对齐的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com