折り返すラベルの先頭行にアイコンを揃える（1lh で上マージンを計算）

どんな時に使う？

• 「アイコン＋説明文」のリスト（機能一覧、チェックリスト、設定項目など）で、文が2行以上に折り返すことがある時
• align-items: center だとアイコンが文全体の真ん中（2行目と3行目の間など）に下がってしまい、どの行の頭なのか分かりにくい時

コード

.item {
  display: flex;
  align-items: flex-start; /* center だと複数行の真ん中に下がる */
  gap: 10px;
}

.item svg {
  --size: 20px;
  flex-shrink: 0;           /* 長い文でアイコンが潰れないように */
  width: var(--size);
  height: var(--size);
  /* 1行ぶんの高さとアイコンの高さの差の半分だけ下げる＝1行目の中央 */
  margin-block-start: calc((1lh - var(--size)) / 2);
}

<li class="item">
  <svg aria-hidden="true">…</svg>
  <span>長い説明文がここに入り、画面幅によっては2行、3行と折り返す</span>
</li>

• lh は「その要素の line-height（1行の高さ）」を 1 とする単位。1lh を使えば、フォントサイズや line-height を変えても自動で計算し直される。
• アイコンが1行の高さより大きい場合は計算結果がマイナスになり、アイコンが少し上にはみ出す形で中央が揃う。

注意点・対応状況

• lh 単位は Chrome 109+、Safari 16.4+、Firefox 120+ で使える。古い環境向けには先に margin-block-start: calc((1.5em - var(--size)) / 2); のように line-height の値を直接書いたフォールバックを置く。
• 1lh はアイコン（svg）自身の line-height で計算される。svg に別の font-size や line-height を付けていると親の文字とずれるので、継承されたままにしておく。
• アイコンの大きさ自体を文字に追従させたい時は アイコンのサイズは px ではなく 1cap で指定して文字に追従させる と組み合わせられる（その場合は --size: 1cap にする）。

出典

• @sanyampunia · 2026-10-23