html - 将 P 标签置于 H1 下方的问题

Question

我在多个网站上都遇到过这个问题，但一直无法解决。问题是，我在使用对齐项垂直对齐的容器内有一个 h1 标签。在 h1 下面我想放置一个 p 标签。这可能是一个简单的解决方法，但我一直无法解决这个问题。

我试过使用 line-height 而不是 align-items 或为 p 标签创建一个新容器，我还尝试从 h1 中删除底部边距并从 p 标签中删除顶部但没有任何效果。这里的解决方案是什么？

.headertext {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 4rem;
}

.header {
  background-image: url('1080background.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

h1 {
  margin-bottom: 0;
  padding-bottom: 0;
  display: inline;
}

p {
  margin-top: 0;
  padding-top: 0;
  font-size: 2rem;
}

<div class="header">
  <div class="headertext">
    <h1>Jude Wallach</h1>
    <p>Test</p>
  </div>
</div>

Site谢谢。

Answer 1

解决方案是将 flex-flow: column; 添加到您的 .headertext 类