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

Question

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

我目前有 h1 和 h2 标签。我尝试将其全部放入 h1 标记并使用 span，但是，在调整大小和对齐时，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>