无法居中 header

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>

我试图让 header 位于页面中间，但它不起作用。它保留在页面的左侧。我尝试使用 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 文件中将 "header" 大写，以匹配 HTML 文件中的内容：

.pageheader {

所以变成了

.pageHeader {

然后使用

text-align: center;

在 .pageHeader 部分是这样的：

.pageHeader {
  text-align: center;
}

Not able to center a header