以H1为中心

我想将我的H1元素置于标题中，但它无法正常工作。它应该位于450px标头的中间，而导航栏则位于右上角。如果可能的话，我想放在左上方的徽标。我已经尝试使用ALIGN，位置和保证金自动。如果有人可以帮助我向我展示我的错误，那就太好了，谢谢。

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>

首先，您应该确保您的标记和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>

我能够通过以下CSS调整来解决一些问题：

1）添加宽度：100％向您的NAV元素

2）添加宽度：100％到您的H1元素

3）添加文本主体：中心到您的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;
  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>

尝试将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>

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

在</nav>解决问题后，用clear:both添加DIV。但是，正如其他人所指出的那样，您的代码中仍然存在很多错误（缺少半olons和仅包括数字，而不包括实际样式属性的保证金或填充线），您仍然需要将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后面，而问题实际上并没有解决。如果您选择降低字体大小，则问题将再次出现。

相关内容

最新更新

热门标签：