Question

我几乎不好意思请求帮助。这不像我以前从未这样做过 - 使用我现在正在使用的确切代码！

对于我的生活，我无法理解为什么新页面的内容不会在浏览器窗口中居中。

我的HTML是：

<!DOCTYPE html>
<html>
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Home</title>

        <link type="text/css" rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <div id="mainContainer">
            Main Content Goes Here
        </div>
    </body>
</html>

这就是CSS：

body { background-color: #EDEDC7; }

#mainContainer {
    width: 1000px;
    margin: 0 auto; }

正在发生的事情是文本被定位在我查看页面的任何浏览器窗口的左边缘的大约1/3处。我知道样式表是由网页“找到”的，因为背景颜色是工作

我已经在FF8，IE9，Chrome，Safari 5，Opera和Dragon的最新版本中检查了它 - 甚至是Mac上的FF，Safari和Chrome！好吧 - 有点痴迷，我知道，但我很难过为什么它不会居中。那么我在这里错过了什么？（也许我忘记了一些愚蠢的小事......）

Answer 1

它正在工作，问题是你的文字没有居中。如果您向其添加文本对齐中心，它将按照您期望的方式工作。

示例：

#mainContainter{
    width: 940px;
    margin: 0 auto;
    text-align: center;
}

Answer 2

如果你想将文本放在那个容器中心，你需要将它放在一个单独的div中，格式化该div的宽度（文本需要去的地方）并使其居中..

在你的例子中，它的中心是长度为1000px的div，所以代码中没有问题.. :)

Answer 3

如果确实可行，您可以始终使用：

.wrapper {
  display: flex;
  justify-content: center;
}

<div class="wrapper">
  <h1>Hello</h1>
</div>

页面内容不会居中

3 个答案: