CSS居中不能使用邊距自動和溢出隱藏

我注意到，如果我在更寬的分辨率下查看頁面，節的內容會向右對齊，而不是居中。CSS居中不能使用邊距自動和溢出隱藏

我用

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寬屏查看錯誤）。

什麼可以導致這個錯誤和什麼是可能的解決方案的想法？

2012-05-31 Cristian

關於這個問題的原因：這是由於你的頭的page-title元素：

#header-outer元素包含一些浮動元素，但你忘了清理，所以偏移留下您的網站的主要部分開始page-title結束。（您可以通過隱藏page-title元素—當你設置display: none頁面被正確居中驗證）

enter image description here

因此增加

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

你解決問題

作爲sidenote強烈避免將空白div僅用於清除目的：有更清晰的方法，不需要額外的m arkup，像easyclearing

2012-05-31 07:58:40 fcalderan

@克里斯蒂安，你有沒有嘗試過這些解決方案？ – fcalderan

@Calderan，謝謝你的回答，看來這是罪魁禍首。但是，隱藏＃header-outer或inner上的溢出將與Facebook按鈕混淆，因爲它們需要可見的溢出來顯示覆蓋。 – Cristian

我選擇將溢出屬性保持原樣，並使＃page-title元素的邊距爲0，這導致浮動問題。感謝您深入解釋發生了什麼。具有很大的意義。 – Cristian

取出

overflow:hidden

從 div#content

，並把它的內容在它的額外<div>具有

width:100%; 
overflow:hidden;

這解決了問題對我來說。

2012-05-31 07:55:46 user2428118

...他寫道：我試着禁用溢出：隱藏... – Sajmon

您的解決方案是消除overflow: hidden

要解決你給了嘗試使用100％寬度的第二個例子浮動錯誤：

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

2012-05-31 08:01:40

這是工作，你知道爲什麼嗎？從@Calderan的回答可能是同樣的原因，從＃header-inner div中沒有未清除的浮點數？ – Cristian

感謝您的回答，您提供了一個有效的解決方案，但@Calderan的答案讓我變得更加不顯眼的解決方案。乾杯！ – Cristian

回答