画像マーカーを使ったリストタグを使った時に文字列がvertical-align: middle的になってほしい！

• 結論から言うと多分無理です

なってくれないんだなこれが！

• 残念ながら現実にはなりません

• 上の画像のソースはこんなん
  • ::before の content に画像を置くとかしても無駄です

<ul>
  <li>リストの要素だよ～</li>
  <li>改行のある<br>リストの要素だよ～</li>
</ul>

ul {
    list-style-image: url("https://i.imgur.com/hX2OCbY.png");
}

li {
    vertical-align: middle;
}

どうにか対策してみる

• 一見するとなんとかなったように見えますが、改行すると崩れます
  • ぶっちゃけ無理にリストタグ使う必要もないと思うので、素直に div とかで代替するのが一番だと思います
  • 何が何でもリストタグ使いたい場合はリストタグでラップしてしまうのが一番でしょうね…

• 上の画像のソースはこんなん
  • リストのマーカーを使うことを放棄しているので、画像を抜けると字が落ちるのはどうしようもないですね

<ul>
  <li>リストの要素だよ～</li>
  <li>改行のある<br>リストの要素だよ～</li>
</ul>

    .ul {
      list-style: none;
    }

    .li::before {
      padding-right: 3px;
      min-height: 36px;
      content: url("https://i.imgur.com/hX2OCbY.png");
      vertical-align: middle;
    }