css - CSS居中不适用于自动边距和隐藏溢出

Question

我注意到，如果我以更宽的分辨率查看页面，部分的内容会向右对齐，而不是居中。

我用

margin: 0 auto;
width: 998px;
overflow: hidden;

它似乎有这个错误，至少在 Safari、Firefox 和 Chrome 中。我尝试禁用overflow: hidden它并消除了该错误，但在内容中弄乱了我的浮动。

您可以在此处的页面上查看示例：http: //autouncle.dk/da/brugte-biler/Kia或http://autouncle.dk/da/brugte-biler/Ford（您必须在至少 1500px 宽屏才能看到错误）。

关于什么可能导致此错误以及可能的解决方案的任何想法？

score 1 · Accepted Answer

关于问题的原因：这是由于page-title您的标题元素：

#header-outerelement 包含一些浮动元素，但您忘记了清除，因此站点主要部分的左侧偏移量从结束处开始page-title。（您可以通过隐藏page-title元素来验证这一点 - 当您设置display: none页面正确居中时）

在此处输入图像描述

所以添加

body#basic_page #header-outer {
   overflow: hidden;
}

你解决问题

作为旁注，强烈避免将空 div 仅用于清除目的：有一些不需要额外标记的更简洁的方法，例如 easyclearing

score 1 · Accepted Answer

您的解决方案正在删除overflow: hidden

要修复第二个示例中的浮动错误，请尝试使用 100% 的宽度：

body#basic_page.brands_controller #content .text_info {
   overflow: hidden;
   font-size: 12px;
   width: 100%; /* new rule */
}

score 0 · Accepted Answer

去除那个

overflow:hidden

fromdiv#content并将其内容放入其中的额外内容<div> 中

width:100%;
overflow:hidden;

这解决了我的问题。

3 回答 3