アイコンとラベルの配置、その微妙なズレを直すCSSテクニック
Better Icon and Label Alignment
リスト項目のアイコンとテキストの垂直配置は、テキストが複数行になると途端に難しくなる。著者は、アイコンがHTML要素の場合と疑似要素の場合の2つの解決策を紹介。`align-items: start`と`lh`単位を組み合わせ、アイコンのサイズやフォントサイズ、コンテナ幅が変わっても正しく中央揃えされる方法を解説する。
固定値のtransformを使っても、アイコンサイズ、フォントサイズ、コンテナ幅が変わるとうまくいかない。
- pveierland
この問題をよりうまく解決するのに役立つ新しいCSSの機能[0]が登場しました。alignment-baseline[1]とtext-box-trim[2]を使います。
[0] https://www.w3.org/TR/css-inline-3/#leading-trim
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
- systoll
`list-style-image` は同じ問題に対するより簡単な解決策のように思えます。
あるいは、チェックマークだけでなく任意のコンテンツを使いたいなら、負の text-indent でもいいでしょう。
- LinguaBrowse
デモをいじってみたけど、どの解決策もあまり中央に寄っていないように見える？
lh 単位が確かにパズルの一部だとは思うけど、何かもっと必要な気がする。たとえば、アセントとディセントが対称だと仮定している点とか。