Question

我在多个网站上遇到此问题，但从未能解决此问题。问题是，我在一个容器内有一个h1标签，它使用align-items垂直对齐。在那个h1下面我想放置一个p标签。这可能是一个简单的修复，但我从来没有能够解决这个问题。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Site谢谢。

Answer 1

在解决方案上，您需要将flex-flow: column;添加到.headertext类

Answer 2

只需将flex-direction: column添加到您的. headertext CSS即可。默认弹性水平对齐弹性项目，flex-direction: column垂直对齐。

BTW：display: inline上的h1并不是真的有用 - 只需保留它

将P标签放在H1下方的问题

2 个答案: