Question

正如标题所指出的，我需要将子文本放在标题的中心。当前，潜台词偏心并且比我想要的See here低。如何调整字幕的位置？

我是Web开发的新手，所以可能缺少一些明显的东西。请参阅我尝试的代码here和here。

.masthead {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.masthead h1 {
  color: #F9F1F1;
  font-family: 'Work Sans', sans-serif;
  font-size: 108px;
}

.masthead p {
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 32px;
}

<section class="section" style="background-color: #000;">
  <div class="masthead">
    <h1><span>Title</span></h1>
    <p><span>Subtitle</span></p>
  </div>
</section>

Here是此代码的小提琴。

Answer 1

在您的CSS中尝试此代码

text-align: center;

Answer 2

您所要做的就是将以下内容添加到CSS中：

.masthead p{
    text-align: center;
}

上面CSS的更改会将字幕安排在中间，但是我认为以下代码是您需要的，我更改了本节的背景，您可以将其更改回您可能需要的任何内容：

.masthead h1 {
  color: #F9F1F1;
  font-family: 'Work Sans', sans-serif;
  font-size: 108px;
  margin: 0;
}

.masthead p {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 32px;
}

.section {
  background-color: #000;
  text-align: center;
  padding-top: 5em;
}

<section class="section">
  <div class="masthead">
    <h1><span>Title</span></h1>
    <p><span>Subtitle</span></p>
  </div>
</section>

Answer 3

请在CSS下方尝试：

.masthead p{
    text-align: center;
}

标题/ HTML / CSS下方的居中字幕

3 个答案: