【初心者向け】テキストとアイコンがズレる原因と解決方法｜align-itemsで簡単に水平揃えにする方法
「テキストとアイコンを横並びにしたら、なぜかアイコンだけ下にズレてしまう…」
こんな経験はありませんか？
特に、display: flex; を使って横並びにしたときに起こりやすい問題です。
本記事では、なぜズレるのか？どう直すのか？ を初心者にも分かりやすく解説します。
▼ テキストとアイコンを横並びにしたときに起きる「ズレ」
まずは、よくあるHTMLとCSSの例を見てみましょう。
【HTML】
<div class="item">
<span>サンプルテキスト</span>
<img src="icon.png" alt="アイコン">
</div>
【CSS】
.item {
display: flex;
}display: flex; を使うことで、テキストとアイコンは横並びになります。
しかし実際にブラウザで確認すると、こんな状態になりがちです。
✔ テキストよりアイコンが少し下にズレている
✔ 完全に水平に揃わない
✔ なんとなくバランスが悪い
なぜこんなことが起きるのでしょうか？
▼ ズレる原因は「デフォルトの揃え方」
Flexbox（display: flex）には、実は「子要素をどう揃えるか」という初期設定があります。
その初期値が
align-items: stretch;（高さを揃える）
になっているため、テキストと画像（アイコン）のサイズ差が原因で、わずかにズレて見えることがあります。
▼ ズレをなくすには「align-items: center;」を使う
水平にきれいに揃えたい場合は、親要素に align-items: center; を追加するだけでOKです。
【修正後のCSS】
.item {
display: flex;
align-items: center;
}
これを追加することで、テキストとアイコンが以下のようにピタッと揃います。
- ✔ テキストとアイコンが同じ高さに揃う
- ✔ 下にズレる問題が解消
- ✔ 見た目のバランスが良くなる
ブラウザで確認すると、とてもきれいに並んでいるのが分かりますよ。
▼ align-items が効かない？その場合にチェックするポイント
「align-items を使ったのに直らない…」
そんな場合は、以下を確認してみてください。
① アイコン画像の高さが不揃い
画像のサイズが大きかったり、比率が違うとズレの原因になります。
.item img {
height: 24px; /* お好みで調整 */
}
固定サイズを指定すると安定します。
② フォントサイズが大きすぎる／小さすぎる
テキストのライン高さ（line-height）が影響してズレることがあります。
.item span {
line-height: 1;
}
line-height を適切にすると揃いやすくなります。
③ 画像の表示スタイルの問題
vertical-align などの影響を受けてズレる場合があります。
img {
display: block;
}
ブロック化すると余計な余白が消えることもあります。
▼ まとめ：横並びでズレるときはまず align-items を使ってみよう！
テキストとアイコンを横並びにした時のズレは、初心者がよくつまずくポイントです。
しかし、原因と基本的な対処法を知っておけば簡単に解決できます。
● 今回のポイントまとめ
- 横並びにしたときのズレはFlexboxの初期設定が原因
- 親要素に align-items: center; を書けばきれいに揃う
- それでもズレる場合は「画像サイズ」「line-height」「display」などを調整する
ちょっとした調整だけで見た目の印象が大きく変わるので、ぜひ試してみてくださいね。
その他関連記事はこちら→プログラミング備忘録
コメント