如何將頁面居中放置在頁面上？

enter image description here

基本上，在CSS我設置體元件是display: inline-block;，使得它僅一樣寬其內容。這工作正常。但是，margin: 0px auto;不會將其居中在頁面上。

有誰知道如何解決這個問題？我希望大藍色方塊在頁面上居中，而不是像現在這樣漂浮在左邊。

這裏是我的CSS：

body { 
    display: inline-block; 
    margin: 0px auto; 
    text-align: center; 
}

這些其他箱子是否應該放在身體內部？ – barro32

我會建議_不集中'身體'，實際上，使一個居中'div' – Asif

你不應該集中身體。看看freecsstemplates.com ---你會讓設計師總是使用div – Yang

而且應用文本對齊：中心;像這樣的HTML元素：

html { 
    text-align: center; 
}

一個更好的方法，雖然是有一個內部div容器，這將是集中的，而不是身體。

2012-06-03 18:16:13

這正是要求的，爲什麼它被拒絕投票？ http://jsfiddle.net/gA9La/2/ – barro32

這完美的作品。謝謝。 –

我編輯了我的答案。看到更好的方法。 –

您必須指定身體的寬度以使其居中在頁面上。

<body> 
    <div> 
    jhfgdfjh 
    </div> 
</body> 

div { 
    margin: 0px auto; 
    width:400px; 
}

2012-06-03 18:16:48 SRN

嗯..我想這可能是這種情況，但..如果我不知道大小提前？ –

然後使用百分比 –

我試着設置寬度並使用百分比，但它們都不居中。 –

body 
    { 
     width:80%; 
     margin-left:auto; 
     margin-right:auto; 
    }

這將工作在大多數的瀏覽器，包括IE瀏覽器。

2012-09-20 23:38:21 Freakishly

是的，我喜歡這個。我不想讓身體有一個固定的寬度。 –

對於那些做知道寬度，你可以不喜歡

div { 
    max-width: ???px; //px,% 
    margin-left:auto; 
    margin-right:auto; 
}

我也同意有關不設置的text-align：對身體中心，因爲它可以搞砸其餘你的代碼，你可能需要單獨設置文本對齊：左很多事情，無論是當時或未來。

2015-05-26 20:04:20 DardanM

回答