CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場

Post on:2020年5月18日

sponsors

アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？
テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSS Values and Units Module Level 4に見たこともない新しい単位がありました！

これらの新しい単位が役立つシーンはどこだと思いますか？
Šime Vidasの記事によると、

アイコンを垂直方向の中央揃えに配置

特に、インラインのSVGアイコンに適しています。

アイコンのサイズをテキストに揃えて配置するCSSは、非常に簡単です。

.inline-icon {
  display: inline-block;
  width: 1lh;
  height: 1lh;
}

.inline-icon {

display: inline-block;

width: 1lh;

height: 1lh;

}

【訳者注】
新しい単位「lh」「rlh」の仕様は、下記をご覧ください。

「lh」「rlh」をサポートしているブラウザは2020年5月現在、Safari Technology Previewのみとなっていますが、各ブラウザでサポートの動きがでています。