画像マーカーを使ったリストタグを使った時に文字列が 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;}