如何堆叠两个标头标签而不是并排

Question

当前标头标签是并排的，我试图让第二个标头标签位于第一个标签下面。

我目前有h1和h2标签。我已经尝试将它全部放入h1标签并使用span，但是，在调整和对齐时，跨度上的样式并不顺利。我试图让它以屏幕为中心，并在标题的正下方有副标题，以中间为中心，而不是左对齐，旁边是它。

header {
  width: 100%;
  height: 100vh;
  background-image: url("underneath.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.wrapper {
  padding-top: 15%;
  color: rgb(240, 240, 240);
  display: flex;
  align-items: center;
  justify-content: center;
}

.name {
  font-size: 6em;
  display: inline;
}

.subtitle {
  display: inline;
}

<header>
  <div class="wrapper">
    <h1 class="name">Answer 42</h1>
    <h2 class="subtitle">Customer Acquistions</h2>
  </div>
</header>

我正在尝试为页面创建一个标题，在其下面有一个副标题，并将其置于我放入CSS的背景图像上方。我当前的代码并排有标题标记。

Answer 1

我希望这个简单的解决方案能帮到你。

header {
    width: 100%;
    height: 100vh;
    background-image: url("underneath.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.wrapper {
    padding-top: 15%;
    color: rgb(240, 240, 240);
}

.name {
    font-size: 6em;
    margin-bottom: 0;
    line-height: 1em;
    text-align: center;
}

.subtitle {
    text-align: center;
    margin-top: 0;
}

<header>
    <div class="wrapper">
        <h1 class="name">Answer 42</h1>
        <h2 class="subtitle">Customer Acquistions</h2>
    </div>
</header>