页面中心内容

Question

如何将页面内容置于其中心？

jsFiddle

<html>
    <head>
        <title>a</title>
    </head>
    <body>
        <div>cxwxc</div>
    </body>
</html>

div {
    margin-left: auto;
    margin-right: auto;
}

我就是这样进行的，但是那行不通。 请如何解决？

Answer 1

text-align: center;

是你的朋友。

http://jsfiddle.net/Y42Pf/26/

要使整个div与其内容居中，您需要为其指定宽度。 默认情况下，元素的width属性是auto，由浏览器计算得出。 在您的情况下，将div的宽度设置为其父元素的宽度的100％，这恰好占用了整个容器。 因此，您的margin-left和margin-right属性解析为零，并且您的div在技术上居中。

给div一个任意宽度，然后重试，您将看到它居中。

演示： http ： //jsfiddle.net/Y42Pf/28/

Answer 2

您是否尝试过text-align：center; 在您的div元素上。 参见http://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 3

您需要提供宽度才能使其正常工作...

<html>
    <head>
        <title>a</title>
    </head>
    <body>
        <div>
            <p style ="width:100px">cxwxc</p>
        </div>
    </body>
</html>

CSS：

p {
    margin-left: auto;
    margin-right: auto;
}

Answer 4

使用display: table 。 当您希望内容收缩包装并同时位于其自己的行上时，它是您真正的朋友： http : //jsfiddle.net/Sft7x/ 。

div {
    display: table;
    margin: 0 auto;
    outline: 1px solid red;
}

Answer 5

尝试这样写：

div {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

发生这种情况的原因是您的文本是相对于您的身体的，但是您的身体只是您的文本，因此它将在页面的开始，像这样设置，我们将div设置为页面的中心。

Answer 6

用于在页面上居中div

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

为了text-align div中的text-align居中，请添加text-align属性

div {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}