如何使正文在页面上居中?
Posted
技术标签:
【中文标题】如何使正文在页面上居中?【英文标题】:How to center body on a page? 【发布时间】:2012-06-08 00:25:17 【问题描述】:我正在尝试在我的 html 页面上将 body 元素居中。
基本上,在 CSS 中,我将 body 元素设置为 display: inline-block;
,以便它的宽度与其内容一样宽。这很好用。但是,margin: 0px auto;
不会在页面上居中。
有谁知道如何解决这个问题?我希望蓝色的大方块位于页面的中心,而不是像现在这样向左浮动。
这是我的 CSS:
body
display: inline-block;
margin: 0px auto;
text-align: center;
【问题讨论】:
那些其他的盒子不应该在体内吗? 我建议不要去中心化body
,其实做一个中心化的div
你永远不应该让身体居中。看看 freecsstemplates.com --- 你会设计师总是使用 div
【参考方案1】:
body
width:80%;
margin-left:auto;
margin-right:auto;
这适用于大多数浏览器,包括 IE。
【讨论】:
是的,我喜欢这个。我不想让身体有一个固定的宽度。【参考方案2】:同时应用 text-align: center;像这样在 html 元素上:
html
text-align: center;
一个更好的方法是有一个内部容器 div,它将被集中,而不是 body。
【讨论】:
这正是所要求的,为什么它被否决了? jsfiddle.net/gA9La/2 我还必须设置 body 的 display 属性才能工作:body display: inline-block;
@ParrisVarney 是的,这是隐含的(查看 OP 的 CSS)。
我认为 Freakishly 的回答比这个要好得多。无意冒犯 Madara,但它的答案应该是被接受的,而不是你的,因为你的提议不是让文本以外的其他项目居中的好方法。
@tanaydin 所以你加了body text-align: initial;
就好了:)【参考方案3】:
您必须指定正文的宽度,使其在页面上居中。
Or put all the content in the div and center it.
<body>
<div>
jhfgdfjh
</div>
</body>
div
margin: 0px auto;
width:400px;
【讨论】:
嗯..我认为可能是这种情况,但是..如果我事先不知道尺寸怎么办? 我尝试设置宽度并使用百分比,但它们都没有使主体居中。 @SRN -- 如果您仅使用 text 进行测试,margin
有什么用?文本也可以以text-align:center
为中心。检查:jsfiddle.net/gA9La/1
不,我不只是以文本为中心。大部分元素都是div。【参考方案4】:
对于那些确实知道宽度的人,你可以这样做
div
max-width: ???px; //px,%
margin-left:auto;
margin-right:auto;
我也同意不要在正文上设置 text-align:center,因为它会弄乱您的其余代码,您可能必须单独设置 text-align:left关于当时或将来的很多事情。
【讨论】:
以上是关于如何使正文在页面上居中?的主要内容,如果未能解决你的问题,请参考以下文章