divの中の文字列が縦方向で中央にならない

はじめに

SNSによくある投稿に対して下側についているユーザプロフィールの項目について

あれが思う通りにならない。

あれこれやったが、とりあえず、下のコードに戻した。

本当はdiv の縦方向で 中央に綺麗によってほしい。

(というかそもそもなぜ文字列が下にそろってたり、上にそろってたりするの？）

→画像があるからだ。画像の高さがあるから、下にそろっているように見えるだけ。

<div class="user_profile_container">
    <div class="user_profile_box">
        <a href="#">
        <img class="profile_icon" src="#">
        </a>
        <span class="user_profile_name">あたし</span>
    </div>
    <div class="user_good_box">
        <i class="like-btn fa-heart far"></i>
        <span class="">0</span>
    </div>
</div>

.user_profile_container {
    display: flex;
}

.user_profile_name {
}

.profile_icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
}

解決

.user_profile_box,
.user_good_box {
    display: flex;
    align-items: center;
}

インライン要素が入っている 2つのブロック要素に対して、フレックスボックスの設定を加える。(”display:flex”)

フレックスボックスはデフォルトの交差軸方向が 垂直方向であるので、その垂直方向の位置を制御できるalign-itemsプロパティを設定する。

今回は中央に揃えたいので center を指定する

※そもそもなぜフレックスボックスのデフォルトの交差軸方向が垂直であるか、そもそも交差軸とは何かについて

display: flexをブロック要素に指定すると 内包する要素の並びはflex-directionというプロパティで制御される。この要素の並ぶ方向のことを 主軸といい、それに直行する方向のことを交差軸(クロス軸)と呼ぶ。ちなみに主軸の方向のデフォルト(初期値)はrow 、つまり水平方向となる。それゆえに交差軸の方向は 垂直方向となる。

align-items - CSS: カスケーディングスタイルシート | MDN

Cross Axis (交差軸) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

過程

そもそもなぜ、” あたし”というインライン要素と、iタグハートアイコンのインライン要素について縦方向の位置がそろわないのか。

最初はなぜか “あたし”というspanタグ(インライン)が何らかのプロパティによってdiv の下にそろうような設定をしてしまっているかと思っていた。iタグについてはその逆で上側にそろうような設定が効いてしまっているかと思っていた。

おそらく、結論としては、どちらもそろっていた、が正しいと思う。

ただ、画像の高さの影響で、あたかもspanは下側に、そろっているかのように見えていただけだと思う。

終わりに

気づくまで時間がかかった。疲れた。