jsFiddle

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的内容居中，您需要为其指定宽度。 By default, an element's width property is auto, which is calculated by the browser.在您的情况下，您的div的宽度设置为其父元素宽度的100％，这恰好占据了整个容器。因此，您的margin-margin和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;
}

对于div内的文本居中，请添加text-align属性

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

中心页面内容

jsFiddle

6 个答案: