在标题中居中 h1答案

【问题标题】：Centering h1 in a header在标题中居中 h1
【发布时间】：2017-07-16 11:31:36
【问题描述】：

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

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>

【问题讨论】：

你想让 nav 和 h1 在同一行吗？你能上传一张你想要实现的图片吗？

标签： html css header position centering

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

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

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>

【讨论】：

【解决方案5】：

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

在您的</nav> 之后添加一个带有clear:both 的div 可以解决问题。但是，正如其他人所指出的，您的代码中仍然存在很多错误（缺少分号和仅包含数字的边距或填充线，而不是实际的样式属性），您仍然需要应用 @987654324如果您希望文本居中，@ 到您的 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 后面，并且问题实际上并未得到解决。如果选择减小字体大小，问题会再次出现。

【讨论】：