【CSS】横並びのアイコンとテキストの高さを揃える方法

こんにちは、すずです(^o^)

今回は「横並びのアイコンとテキストの高さを揃える方法」についてご紹介します。

早速ご覧ください！

【CSS】横並びのアイコンとテキストの高さを揃える方法
1. HTML
2. CSS
まとめ

【CSS】横並びのアイコンとテキストの高さを揃える方法

今回、アイコンは「Font Awesome」を使用しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sample</title>
  <!-- Font Awesome -->
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
  <h1><i class="fas fa-user-circle fa-2x"></i>ユーザネーム</h1>
</body>
</html>

<i class="fas fa-user-circle fa-2x"></i>の部分が、アイコンです。

上記のHTMLをブラウザで見てみると、こんな感じ⇩

テキストがアイコンの下に揃ってしまいます。
これをアイコンの真ん中にテキストが揃うよう、CSSで調整しましょう。

CSS

@charset "utf-8";

i {
  vertical-align: middle;
}

アイコン<i>に対して、vertical-align: middle;を記述します。

はい、これでアイコンの真ん中にテキストが揃います。

ちなみに、margin-right: 10px;をつけてあげると、

アイコンとテキストのあいだに余白ができて、いい感じです♪

まとめ

はい、今回は「横並びのアイコンとテキストの高さを揃える方法」についてご紹介しました。

よくある実装だと思うので、ぜひ参考にしてみてください！

これからもいろいろな実装を「分かりやすく」「簡潔に」ご紹介していきますので、ご覧いだだければ幸いです(^o^)