フレンドボックス縦列の真ん中への

Question

これは簡単な配偶者でしたが、何らかの理由でそれが複雑になりました。 投稿入力のテキストのように、<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小道具を置き換える）次の2行を追加したい：

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

Answer 2

がaタグから#form-buttonsとalign-self: stretch;からalign-items: stretch;を除去するために、以下を追加するには、 aタグ

a { 
    display:flex; 
    align-items: center; 
    justify-content: center; 
} 

はそうのようになります。

.flex { 
 
    display: flex; 
 
} 
 

 
#form-buttons { 
 
    font-weight: bold; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
#form-buttons a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: blue; 
 
    color: #fff; 
 
    width: 50%; 
 
} 
 
#form-buttons 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="">all values</a> 
 
</div>