お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

リストタグで画像マーカーを使った時に文字列が縦中央に来るようにする

投稿日：
言語::HTML言語::CSS

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