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>

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

1 个答案: