Flexbox を使った横並びレイアウトで、テキストが微妙に下へ寄って見えることがあります。原因は「交差軸のそろえ方」「ベースライン揃え」「行の余白（line-height）」「アイコンや画像のインライン挙動」のいずれかに集約できます。代表的な再現例と対処法を順に示します。
交差軸の揃えが baseline（または stretch）で文字が下がる
親に display: flex を指定しただけだと、既定の align-items: stretch または明示した align-items: baseline が原因で、文字が下がって見えることがあります。ボタン内でアイコンとテキストを横並びにしたとき、大きさの違う要素のベースライン基準で揃うと視覚的に下がります。交差軸を中央に明示して、常に縦中央揃えにします。
.row{
display: flex;
align-items: center; /* 交差軸は中央で固定 */
gap: .5rem;
}
<div class="row">
<span class="icon" aria-hidden="true">★</span>
<span class="label">Button</span>
</div>
アイコンや画像がインラインのままで下に余白が生まれる
<img> や <svg> をテキストと並べると、インライン要素の「ベースライン下の余白」が効いてアイコンが少し下がります。フレックスアイテム内のメディアはブロック化すると揃いやすくなります。テキストの上下中央を狙うなら、アイコン側に display: block、場合によっては vertical-align: middle（インラインのまま使う場合）で調整します。
.row .icon img,
.row .icon svg{
display: block; /* ベースライン余白を消す */
height: 1em; /* 文字サイズに追従させると揃いやすい */
width: 1em;
}
line-height の過多で文字が下に寄って見える
テキストの行高が大きすぎると、文字がボックスの下側に寄って見えます。アイコンと文字の視覚中心を合わせたいときは、テキスト側の line-height を実寸に近づけます。等幅にしたい行は line-height: 1 か、フォントに応じた適正値へ。行間を削ると中央揃えとの相性も良くなります。
.row .label{
line-height: 1; /* 余白を詰める */
}
高さ固定のボタンで文字が沈む場合は内側もフレックスで揃える
高さを固定したコンポーネントでテキストが下がる場合、内側ラッパーをフレックス中央揃えにします。上下のパディングや行高に依存せず、常に幾何学的な中央へ配置できます。
.btn{
display: inline-flex;
align-items: center; /* 縦中央 */
justify-content: center; /* 横中央（任意） */
gap: .5rem;
height: 40px;
padding: 0 16px;
}
font-size の差や異なるフォントが混在している
隣り合う要素のフォントサイズやフォントファミリが異なると、ベースラインの位置が揃わずズレが強調されます。コンポーネント内は同じ font-family と font-size を基本にし、必要ならサイズ差のある要素だけ align-self: center で補正します。
.row .sub{
font-size: .875rem;
align-self: center; /* 行単位で縦位置を補正 */
}
SVG 内部の余白が原因のときは viewBox と縦位置を見直す
SVG アイコンが下がる場合、SVG の viewBox に余白が含まれているケースがあります。余白をトリミングした viewBox に変更した上で、前述の display: block と align-items: center を組み合わせると解決しやすくなります。
実用スニペット（アイコン＋テキストが常に水平・中央）
実務でまず試すべき最小セットは次の通りです。親の中央揃え、メディアのブロック化、行高の適正化を同時に入れます。
<button class="btn">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">...</svg>
<span class="label">Download</span>
</button>
.btn{
display: inline-flex;
align-items: center;
gap: .5rem;
height: 40px;
padding: 0 16px;
}
.btn .icon{
display: block; /* ベースライン余白を排除 */
width: 1em;
height: 1em;
}
.btn .label{
line-height: 1; /* 文字の上下余白を詰める */
}
原因切り分けのコツ
まず親に align-items: center を当てて縦中央を強制し、次にアイコンや画像を display: block に変えてベースラインの余白を除去し、最後に line-height を 1 付近へ寄せて視覚中心を合わせます。これでも揃わない場合は、フォント差・SVG の viewBox 余白・意図しない align-items: baseline の指定を疑ってください。
まとめ
Flexbox で文字が下にずれる主因は、交差軸の基準がベースライン寄りになっていること、メディアのインライン余白、行高の過多の三点です。親の align-items: center、子メディアの display: block と 1em スケーリング、テキストの適正な line-height をセットで適用すれば、多くのケースでピタッと水平にそろいます。
