【CSS】アイコン（material-icons）とテキストを上下中央寄せにする

CSSでアイコン（material-icons）とテキストを上下中央寄せにして良い感じにしたい！

概要

今回の記事では、CSSでアイコン（material-icons）とテキストを上下中央寄せにして良い感じにする手順を掲載する。

環境

• Google Chrome 116.0.5845.96（Official Build）（64 ビット）

手順書

サイドバーなどで良い感じに使えるようにアイコン（material-icons）とテキストを上下中央寄せにする例。

display: flex;を使う方法とline-heightを使う方法の2パターンを載せる。

display: flex;を使う方法

.icon-container {
    display: flex;
    align-items: center;
    height: 64px;
}

<div class="icon-container">
    <i class='material-icons'>filter_alt</i>フィルター
</div>

こんな感じ。

line-heightを使う方法

.icon-container {
    height: 64px;
    line-height: 64px;
}

<div class="icon-container">
    <i class='material-icons'>filter_alt</i>フィルター
</div>

こんな感じ。

こっちはアイコンの下がちょっと空き気味。

まとめ（感想文）

material-icons、めちゃくちゃ便利ですね。