javascript - 标题不在其容器的绝对中心

Question

我是一名学生，正在尝试学习如何创建网站。

我的页眉(“This Will Be The Day”)显示为居中，但是当我更改页面的分辨率和大小时，它不会相对于其下方的内容保持居中。下面是我页面的 CSS 和 HTML 内容。

body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #eee;
  font-size: 1em;
  font-family: Helvetica, Arial, Geneva, sans-serif;
  line-height: 1.3;
}

h1 {
  margin: 0;
  line-height: 1;
}

h2, h3, h4, h5, h6 {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

p {
  margin: 0 0 1em;
}

.container {
  margin: 0;
  background-color: #FFF;
}

.banner {
  color: #fff;
  padding: 2em;
  background-color: #000;
  border-bottom: 1px solid #333;
}

.nav {
  float: left;
  width: 20%;
  margin-left: 5%;
  padding-top: 2em;
  padding-bottom: 2em;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 75%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  font-size: 14px;
}

.content {
  float: left;
  width: 50%;
  padding-top: 2em;
  padding-bottom: 2em;
  margin: 0 0 0 10%;
}

.footer {
  clear: both;
  color: #fff;
  background-color: #000;
  padding: 2em;
  text-align: right;
  border-top: 1px solid #333;
}

ol {
  float: left;
  width: 90%;
  margin: auto;
  text-align: center;
}

ul {
  float: left;
  width: 90%;
  margin: auto;
  text-align: center;
  padding-bottom: 1em;
}

iframe {
  float: left;
  align: center;
  padding-left: 10%;
}

<div class="container">
  <div class="banner">
    <h1>RWBY Lyrics</h1>
  </div>
  <div class="nav">
    <button class="accordion">Volume One</button>
    <div class="panel">
      <a href="RWBYThisWillBeTheDay.html">This Will Be The Day</a>
    </div><button class="accordion">Volume Two</button>
    <div class="panel">
      <p>Volume Two Songs Here</p>
    </div><button class="accordion">Volume Three</button>
    <div class="panel">
      <p>Volume Three Songs Here</p>
    </div><button class="accordion">Volume Four</button>
    <div class="panel">
      <p>Volume Four Songs Here</p>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      });
    }
  </script>
  <div class="content">
    <h2>This Will Be The Day</h2>
    <div style="margin-left: 2em">
      They see you as small and helpless;
    </div>
    <div style="margin-left: 2em">
      They see you as just a child.
    </div>
    <div style="margin-left: 2em">
      Surprise when they find out that a warrior will soon run wild.
    </div>
    <div style="margin-left: 2em">
      Prepare for your greatest moments;
    </div>
    <div style="margin-left: 2em">
      Prepare for your finest hour.
    </div>
    <div style="margin-left: 2em">
      The dream that you've always dreamed is suddenly about to flower.
    </div>
    <div style="margin-left: 2em">
      We are lightning,
    </div>
    <div style="margin-left: 2em">
      Straying from the thunder,
    </div>
    <div style="margin-left: 2em">
      Miracles of ancient wonder.
    </div>
    <div style="margin-left: 2em">
      This will be the day we've waited for.
    </div>
    <div style="margin-left: 2em">
      This will be the day we open up the door.
    </div>
    <div style="margin-left: 2em">
      I don't wanna hear your absolution;
    </div>
    <div style="margin-left: 2em">
      Hope you're ready for a revolution.
    </div>
    <div style="margin-left: 2em">
      Welcome to a world of new solutions.
    </div>
    <div style="margin-left: 2em">
      Welcome to a world of bloody evolution.
    </div>
    <div style="margin-left: 2em">
      In time, your heart will open minds,
    </div>
    <div style="margin-left: 2em">
      A story will be told,
    </div>
    <div style="margin-left: 2em">
      And victory is in a simple soul
    </div>
    <div style="margin-left: 2em">
      Your world needs a great defender.
    </div>
    <div style="margin-left: 2em">
      Your world's in the way of harm.
    </div>
    <div style="margin-left: 2em">
      You want a romantic life; a fairytale that's full of charm.
    </div>
    <div style="margin-left: 2em">
      Beware that the light is fading;
    </div>
    <div style="margin-left: 2em">
      Beware if the dark returns.
    </div>
    <div style="margin-left: 2em">
      This world's unforgiving; even brilliant lights will cease to burn.
    </div>
    <div style="margin-left: 2em">
      Legends scatter.
    </div>
    <div style="margin-left: 2em">
      Day and night will sever.
    </div>
    <div style="margin-left: 2em">
      Hope and peace are lost forever.
    </div>
    <div style="margin-left: 2em">
      This will be the day we've waited for...
    </div>
    <div style="margin-left: 2em">
      We are lightning...
    </div>
    <div style="margin-left: 2em">
      Welcome to a world of new solutions...
    </div>
    <div style="margin-left: 2em">
      This will be the day we've waited for.
    </div>
    <div style="margin-left: 2em">
      This will be the day we open up the door.
    </div>
    <div style="margin-left: 2em">
      I don't wanna hear your absolution;
    </div>
    <div style="margin-left: 2em">
      Hope you're ready for a revolution.
    </div>
    <div style="margin-left: 2em">
      Welcome to a world of new solutions.
    </div>
    <div style="margin-left: 2em">
      Welcome to a world of bloody evolution.
    </div>
    <div style="margin-left: 2em">
      In time, your heart will open minds,
    </div>
    <div style="margin-left: 2em">
      A story will be told,
    </div>
    <div style="margin-left: 2em">
      And victory is in a simple soul
    </div><iframe align="center" allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/Tb1_93M8SXA?rel=0&amp;showinfo=0" width="560"></iframe>
  </div>
  <div class="footer">
    I highly recommend taking a look at the RWBY Wiki located at <a href="rwby.wikia.com">rwby.wikia.com</a> for more information.
  </div>
</div>

请注意，我使用 h2 标记将页眉放在页面上，因此它很可能位于该 CSS 中。

Answer 1

问题不在于 header ，这是因为您不恰本地使用了 ol 和 ul -- 它们在其中的元素上放置了缩进。

从

更改您的 html

<h2>
This Will Be The Day
</h2>
<ol>They see you as small and helpless;</ol>
<ol>They see you as just a child.</ol>
<ul>Surprise when they find out that a warrior will soon run wild.   </ul>

到

<h2>
This Will Be The Day
</h2>
<p class="poem">
They see you as small and helpless;<br>
They see you as just a child.<br>
Surprise when they find out that a warrior will soon run wild.<br>
</p>

并将其添加到您的 CSS

p.poem {
  text-align: center;
}