垂直对齐两个元素

Question

<header>
    <h1>Title</h1>
    <h2>Subtitle</h2>
</header>

我需要在标题内垂直对齐h1和h2。 h2需要低于h1。有没有办法用flex来做这个而不包装h1和h2标签？

修改

要清楚 - H1和H2应在标题内垂直对齐。 H1和H2应该位于另一个之下。

Answer 1

你可以使用像这样的flexbox。

header{
  border: 2px solid red;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1,h2{
  margin: 0;
  padding: 0;
  text-align: center;
}

h1{
  background: red;
}

h2{
  background: yellow;
}

<header>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
</header>

Answer 2

这是你想要的

<style>
header{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
h1,h2{
  text-align: center;
}
</style>

<header>
    <h1>Title</h1>
    <h2>Subtitle</h2>
</header>