ブロック要素とインライン要素を上下中央に合わせる

下記のコードのようにブロック要素とインライン要素が隣り合わせになったときに上下中央に合わせる方法をご紹介します。.block_inlineクラスの要素の中に<p>と<span>タグがあるコードになっています。これを上下中央揃えます。

<div class="block">
    <div class="block_inline">
        <p>Email</p><span class="hoge">★★★</span>
    </div>
</div>

display: flexを使った方法

.block_inline {
    display: flex;
    align-items: center;
}

/* もし高さがそろわなかった場合の追加プロパティ */
.block_inline span{
    padding-top: 2%;
}

もしpタグやspanタグのフォントサイズが異なる場合、上下中央の高さが微妙にずれている場合もあるかと思います。その場合はフォントサイズを調整するかpadding-topで微調整することで改善できるかと思います。

display: inline-blockを使った方法

上記のサンプルHTMLコードだとpタグがブロック要素なので必然的に折り返されます。そこで下記のコードを使うことですべてインラインブロックに変更することで上下中央配置に調整することができます。

.block_inline *{
    display:inline-block;
}

こちらもフォントのサイズを調整してあげることで上下中央にうまく配置できるかと思います。