无法集中标题

Question

我有以下代码：

#header, #page {
  max-width: 1040px;
  min-width: 960px;
}
#page {
  margin: 0px auto;
}
.pageheader {
  margin: 0 auto;
}

<div id="page">
  <div id="header">
    <h1 class="pageHeader">The Header is here</h1>

我正在尝试将标题放在页面中间，但它无效。它仍然在页面的左侧。我尝试使用margin: 0 auto;，但似乎也没有用。

Answer 1

将此添加到您的css

#header, #page {
  max-width: 1040px;
  min-width: 960px;
  text-align: center;
}

Answer 2

标题位于页面的中心（中间是通常用于描述垂直位置的术语）。只是因为宽度为auto（默认值），它还会占用页面的整个宽度。

如果您想在标题中对齐文字，那么您需要：

text-align: center

Answer 3

首先将CSS文件中的“标题”大写，以匹配您所说的HTML文件：

  

.pageheader {

所以它变成了

  

.pageHeader {

然后使用

  

text-align：center;

在.pageHeader部分中，如下所示：

.pageHeader {
  text-align: center;
}