以CSS爲中心。

這可能會變成一個微不足道的問題，但我試圖將所有的div放入一個容器中，但無論我嘗試使用自動邊距，所有東西都仍然對齊到頁面的左側。以CSS爲中心。

任何人都知道發生了什麼事？

把它貼的jsfiddle太：

#page-container { 
margin: 0px auto; 
}

任何幫助將是真棒傢伙。

來源

2015-03-03 Lee

爲了使用'magin：0 auto;'技巧，你需要放一個固定的'width'。 http://jsfiddle.net/eLogy4nh/1/ – 2015-03-03 12:32:16

請定義＃頁容器的寬度 – 2015-03-03 12:32:44

您#page-container塊的默認寬度爲100％，所以margin: 0 auto不會做任何事情。

然而，你的塊級子元素可以居中，例如：

#main-nav {  
    background: grey;  
    height: 30px;  
    width: 90%; 
    margin: 0 auto; 
}

您需要的margin: 0 auto適用於每個您希望#page-container母塊內的中心容器。

你可以用CSS這許多方面，無論是應用相同的規則需要被居中或創建一個CSS類定心規則，那麼類適用於每個塊，例如每塊：

#page-container > div { 
    margin: 0 auto; 
}

請注意，獲得類似結果的更簡單方法是將#page-container的寬度設置爲90％，並讓子元素佔據父塊的整個寬度。

但是，這兩種技術都是有效的，要選擇的技術可能取決於其他設計和佈局考慮因素，例如使用背景圖像等。

見演示小提琴在：http://jsfiddle.net/audetwebdesign/resqhsoe/

來源

2015-03-03 12:39:35

Marc，Aaron，Mike，Yogesh>謝謝你們，你們都是對的！，而且在來這裏之前我已經嘗試了這些東西。起初我以爲我看不到樹木，但事實證明，冒號和css中的值之間有一個不可打印的字符。我的編輯沒有顯示它，但是如果我在線觀看了CSS，那就正好在那裏凝視着我。儘管非常感謝你的幫助！以爲我瘋了。 – Lee 2015-03-03 14:52:51

看起來這上面已經回答了...

但居中的項目，它需要的寬度，沒有一個塊元素將包含100％可用空間。

#page-container { 
width: 70%; 
margin: 0px auto; 
}

來源

2015-03-03 12:40:44 Aaron

以CSS爲中心。

回答

相關問題