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

标签 html css

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

相关文章:

html - 如何在不使用表格的情况下制作这个 2 列表?

html - CSS如何垂直对齐伪元素内的文本

php - 实时环境中静态内容的适当缓存持续时间

html - 包装时将元素保持在一起

javascript - 在服务器端显示适合div的div内容

html - 在线上传时导航栏不显示

javascript - 在javascript中以编程方式填写和提交textarea

javascript - 简单的条形进度指示器静态或动画

php - 在 PHP 中使用 htmlentities() 函数时防止浏览呈现 HTML

css - h1、h2、h3 标题中的粗体字体 - 92590