こんにちは、すずです(^o^)
今回は「横並びのアイコンとテキストの高さを揃える方法」についてご紹介します。
早速ご覧ください!
【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^)