如何将页面居中放置在页面上？

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

回答