align-items : center; によって <a> 内のテキストも上下中央揃えさせるのはなぜですか?

各アイテムがコンテンツの高さに戻るためです。
2021年12月14日
ユーザー

2:17の所でロゴとダウンロードボタンのレイアウトを調整する際に
align-items; center; を使用することに関する質問です。

この align-items;center; を使用する前、
つまりは header.containerdisplay: flex; を使用しただけの状態の時、

添付のように、ダウンロードボタンは header.container の高さいっぱいになっていて、
ダウンロードの文字は baseline に沿っているのか若干上に寄っています。(サイズは160*32)

ここで、 align-items;center; を使用すると
<a>が8px程縮み、(サイズは160*24)
添付のようにy軸方向で中央寄せとなるのですが、

この時、ダウンロードの文字自体も<a>の中でy軸に対し中央寄せになっている(ように見える)
のは何故でしょうか。

align-items; center; はFlexboxの中で、
交差軸に対し、Flex Itemsを中央寄せにするという認識でして、
あくまで <a> が中央寄せとなり、ダウンロードの文字はそのまま baseline 上に
あるような若干上に寄ったまま配置されると思っていたのですが。

フレックスボックスの授業を見返したのですが
自分では解決に至らず、、
変な質問、かつ乱文で恐縮ですが、
何卒ご教授の程宜しくお願い致します。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(5)