アイコンとテキストを横に並べたときに、縦方向（上下）にずれてしまう

2025.03.23

アイコン画像と文字をそのまま横に並べると、上下が綺麗に揃わないことがあります。そんなときはFlexboxを活用しましょう。

親要素にdisplay: flex;をつけ、上下位置の調整にalign-items: center;を指定します。

/* 上下の中央に揃えるにはこのようにします */
display: flex;
align-items: center;

ポイント

• display: flex;を親要素に指定することで、要素が横に並びます。
• align-items: center;を指定することで、子要素が上下の中央に配置されます。

See the Pen Align vertically image and text by Miyazaki Yuuki (@M-Yuuki) on CodePen.