css - Flexbox 垂直对齐到父元素的中间

Question

这本来是简单的配偶，但由于某种原因它变得复杂了。我想要 <a> 中的文字标签垂直居中，就像提交输入的文本一样。

在 <a>我知道它应该是 align-self: center; 但是当我这样做时，元素会失去它的高度。

这是我的代码。

This is a link to the codepen

  .flex{
  display: flex;
}

#form-buttons {
  align-items: stretch;
  font-weight: bold;
  width: 300px;
  height: 300px;
  a {
    align-self: stretch;
    background-color: blue;
    color: #fff;
    width: 50%;
  }
  input[type="submit"] {
    width: 50%;
    background-color: black;
    color: #fff;
    border: 0px;
  }
}


    <div id="form-buttons" class="flex">
          <input type="submit" name="front-side-prop-search" value="search">
          <a href="#">view all results</a>
    </div>

Answer 1

我要添加这两行(替换 align-self prop):

a {
    display: inline-flex;
    align-items: center;
}