Flexbox - 垂直对齐块和文本

Question

我希望h2有一个button侧面如下图所示:

我尝试了flexbox,但是通过居中button,它不再填满整个高度.

header {
  display: flex;
  background-color: blue;
  color: white;
  margin-bottom: 2em;
}
.header1 {
  align-items: center;
}
.button {
  margin-left: auto;
  background-color: yellow;
}

<header class="header1">
  <h2>Text centered but Button not full Height</h2>
  <a class="button" href="https://google.com">Read More</a>
</header>

<header class="header2">
  <h2>Button full height but Text not centered</h2>
  <a class="button" href="https://google.com">Read More</a>
</header>

有没有办法实现如图所示？我想避免为按钮添加填充或固定高度,因为我需要调整它以进行多个媒体查询.

Answer 1

让你button一个flexbox也和垂直对齐使用align-items: center-参见下面的演示:

header {
  display: flex;
  background-color: blue;
  color: white;
  margin-bottom: 2em;
}
.header1 {
  align-items: center;
}
.button {
  margin-left: auto;
  background-color: yellow;
  display: flex;
  align-items: center;
}

<header class="header2">
  <h2>Button full height but Text not centered</h2>
  <a class="button" href="https://google.com">Read More</a>
</header>