CSS居中不使用margin auto和overflow hidden

Question

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

我用

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

似乎有这个bug，至少在Safari，Firefox和Chrome中是这样。我尝试禁用overflow: hidden并删除了该错误，但在内容中弄乱了我的花车。

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

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

Answer 1

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

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

所以添加

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

你解决问题

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

Answer 2

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

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

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

Answer 3

删除

overflow:hidden

来自div#content，并将其内容添加到其中{/ 1}}，其中包含

<div>

这解决了我的问题。