标题不是留在容器的绝对中心

时间：2018-02-02 13:40:01

标签： javascript html css

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

我的标题（“这将是一天”）显示为居中，但是当我更改页面的分辨率和大小时，它不会相对于其下方的内容保持居中。下面我有我的页面的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。

2 个答案:

答案 0 :(得分：1)

问题不在于标题，而是因为您不恰当地使用exe和ol - 它们会对其中的元素进行缩进。

从

更改您的HTML 
ul

到

<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>

并将其添加到您的CSS 

<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>

答案 1 :(得分：0)

  1. ul和ol是不必要的，您可以省略它们。将整个歌词放在段p中，然后将<br>放在每行的末尾以打破新行。

  2. 如果您想要在调整窗口大小时将标题（这将是一天）h2和歌词p放在一起，您应该给它们相同的样式。例如：

    h2 {
margin: 2em;
text-align: left;
padding: auto;
}

p {
margin: 2em;
text-align: left;
padding: auto;
}

    3. 结果如下：

    ＆＃13;
    ＆＃13; 
    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 {
  margin: 2em;
  text-align: left;
  padding: auto;

}

p {
  margin: 2em;
  text-align: left;
  padding: auto;
}

.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;
}
iframe {
	float: middle;
  margin: 2em;
  text-align: center;
  padding: auto;
}
}
    ＆＃13; 
    <body>
<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>
    <p>
    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>
Prepare for your greatest moments;<br>
Prepare for your finest hour.<br>
The dream that you've always dreamed is suddenly about to flower.<br>
We are lightning,<br>
Straying from the thunder,<br>
Miracles of ancient wonder.<br>
This will be the day we've waited for.<br>
This will be the day we open up the door.<br>
I don't wanna hear your absolution;<br>
Hope you're ready for a revolution.<br>
Welcome to a world of new solutions.<br>
Welcome to a world of bloody evolution.<br>
In time, your heart will open minds,<br>
A story will be told,<br>
And victory is in a simple soul<br>
Your world needs a great defender<br>
Your world's in the way of harm.<br>
You want a romantic life; a fairytale that's full of charm.<br>
Beware that the light is fading;<br>
Beware if the dark returns.<br>
This world's unforgiving; even brilliant lights will cease to burn.<br>
Legends scatter.<br>
Day and night will sever.<br>
Hope and peace are lost forever.<br>
This will be the day we've waited for...<br>
We are lightning...<br>
Welcome to a world of new solutions...<br>
This will be the day we've waited for.<br>
This will be the day we open up the door.<br>
I don't wanna hear your absolution;<br>
Hope you're ready for a revolution.<br>
Welcome to a world of new solutions.<br>
Welcome to a world of bloody evolution.<br>
In time, your heart will open minds,<br>
A story will be told,<br>
And victory is in a simple soul
</p>
<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>
</body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题