在 header 中居中 h1

Question

我想将我的 h1 元素置于 header 的中心，但它不起作用。它应该在 450px header 的中间，而导航栏保持在右上角。如果可能的话，我想在左上角放一个标志。我试过对齐、位置和边距自动。如果有人可以帮助并告诉我我的错误，那就太好了，谢谢。

body {
  background-color: #999;
  font-family: times;
}
header {
  height: 450px;
  background: url(../Pictures/Flensburg.jpg) center center fixed;
  background-size: cover;
}
nav {
  float: right;
  30px 30px 0 0;
}
ul{
  display: inline;
  align: right;
  list-style-type: none;
  padding: 10px
}
li {
  display: inline-block;
  padding: 10px
}
a {
  background-color: #b3b3b3;
  color: white;
  text-transform: uppercase;
}
h1 {
  font-size: 72px
  width: 100%
}

<!DOCTYPE html>
<html>
  <head>
    <title>Keanu</title>
    <link href="CSS/Main.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header>
    <nav>
      <ul>
    <li><a href="Index.html">Home</a></li>
    <li><a href="About Me.html">About Me</a></li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Testimonial.html">Testimonial</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
  </nav>
  <h1>My Personal Website</h1>
</header>
<footer>

</footer>
  </body>
</html>

Answer 1

首先，您应该确保您的标记和 CSS 规则有效。规则 align: right 即 CSS 中不存在。另外，您在 h1 CSS 规则中忘记了 ;。

要使 h1 居中，您只需在其上放置 text-align: center;，同时使 nav 元素 display: block; 使其保持在自己的行中。

body {
  background-color: #999;
  font-family: Times;
}

header {
  height: 450px;
  background: url(../Pictures/Flensburg.jpg) center center fixed;
  background-size: cover;
}

ul {
  display: block;
  text-align: right;
  list-style-type: none;
  padding: 10px;
}

li {
  display: inline-block;
  padding: 10px;
}

a {
  background-color: #b3b3b3;
  color: white;
  text-transform: uppercase;
}

h1 {
  font-size: 72px;
  width: 100%;
  text-align: center;
}

<header>
  <nav>
    <ul>
      <li><a href="Index.html">Home</a></li>
      <li><a href="About Me.html">About Me</a></li>
      <li><a href="Portfolio.html">Portfolio</a></li>
      <li><a href="Testimonial.html">Testimonial</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </nav>
  <h1>My Personal Website</h1>
</header>

Answer 2

尝试将 display: inline-block;、text-align: center; 和 width: 100%; 添加到 h1 标题。

h1 {
    font-size: 72px;

    width: 100%;
    display: inline-block;
    text-align: center;
}

下面的完整编辑代码：

body {
  background-color: #999;
  font-family: times;
}
header {
  height: 450px;
  background: url(../Pictures/Flensburg.jpg) center center fixed;
  background-size: cover;
}
nav {
  float: right;
  30px 30px 0 0;
}
ul{
  display: inline;
  align: right;
  list-style-type: none;
  padding: 10px
}
li {
  display: inline-block;
  padding: 10px
}
a {
  background-color: #b3b3b3;
  color: white;
  text-transform: uppercase;
}
h1 {
  font-size: 72px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

<header>
  <nav>
    <ul>
      <li><a href="Index.html">Home</a></li>
      <li><a href="About Me.html">About Me</a></li>
      <li><a href="Portfolio.html">Portfolio</a></li>
      <li><a href="Testimonial.html">Testimonial</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </nav>
  <h1>My Personal Website</h1>
</header>
<footer>

</footer>

Answer 3

我能够通过以下 css 调整解决几个问题：

1) 添加 width: 100% 到你的导航元素

2) 将 width:100% 添加到您的 h1 元素

3) 添加 text-align: center 到你的 h1 元素

Answer 4

body {
  background-color: #999;
  font-family: times;
}
header {
  height: 450px;
  background: url(../Pictures/Flensburg.jpg) center center fixed;
  background-size: cover;
}
nav {
  float: right;
  30px 30px 0 0;
}
ul{
  display: inline;
  align: right;
  list-style-type: none;
  padding: 10px
}
li {
  display: inline-block;
  padding: 10px
}
a {
  background-color: #b3b3b3;
  color: white;
  text-transform: uppercase;
}
h1 {
  font-size: 72px
  width: 100%;
text-align:center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Keanu</title>
    <link href="CSS/Main.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header>
    <nav>
      <ul>
    <li><a href="Index.html">Home</a></li>
    <li><a href="About Me.html">About Me</a></li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Testimonial.html">Testimonial</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
  </nav>
  <h1>My Personal Website</h1>
</header>
<footer>

</footer>
  </body>
</html>

Answer 5

你的问题最初源于你的浮动<nav>。您尚未清除浮动，这意味着以下元素（h1）受浮动导航的影响。

在 </nav> 之后添加 div 和 clear:both 可以解决问题。但是，正如其他人所指出的那样，您的代码中仍然存在很多错误（缺少分号和仅包含数字的边距或填充线，而不是实际样式属性），您仍然需要如果您希望文本居中，请将 text-align:center 应用于您的 h1。我已在下面的代码中更正并完成此操作。

body {
  background-color: #999;
  font-family: times;
}
header {
  height: 450px;
  background: url(../Pictures/Flensburg.jpg) center center fixed;
  background-size: cover;
}
nav {
  float: right;
  /* The previous line beneath was "30px 30px 0 0;" - I assumed you wanted a margin. Change if not */
  margin: 30px 30px 0 0;
}
ul{
  display: inline;
  align: right;
  list-style-type: none;
  padding: 10px;
}
li {
  display: inline-block;
  padding: 10px;
}
a {
  background-color: #b3b3b3;
  color: white;
  text-transform: uppercase;
}
h1 {
  font-size: 72px;
  width: 100%;
text-align:center;
}
.clear{
clear:both;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Keanu</title>
    <link href="CSS/Main.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header>
    <nav>
      <ul>
    <li><a href="Index.html">Home</a></li>
    <li><a href="About Me.html">About Me</a></li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Testimonial.html">Testimonial</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
  </nav>
<div class="clear"></div>
  <h1>My Personal Website</h1>
</header>
<footer>

</footer>
  </body>
</html>

编辑：
请注意，如果您不清除浮动并更正 css 中的错误，从而获得 72px 的字体大小，它看起来就像元素正确对齐一样。但是，您的 h1 仍会落后于您的 nav，问题实际上并未解决。如果选择减小字体大小，问题又会出现。

在 header 中居中 h1

Centering h1 in a header

html

css

position

header

centering