list-style-image　垂直方向の揃えがうまくいかない

前提・実現したいこと

list-style-imageを使用して、リストの前にチェックマークのpngを置いた。
その後に続く文章と、垂直方向でズレる。

発生している問題・エラーメッセージ

画像と文章とで、垂直方向の揃えがうまくいかない。

該当のソースコード

【HTML】

<ul> 　<li>予約前に政府発行の身分証明書を求める権限</li> 　<li>ハウスルールに同意しないと泊まれない</li> 　<li>過去の宿泊のレビューもばっちり読める</li> 　<li>財物損害は¥100,000,000まで無料で補償</li> 　<li>$1,000,000の賠償責任保険が無料で付帯</li> 　<li>24時間365日対応グローバルカスタマーサポート</li> </ul>

【CSS】
ul{
list-style-image: url('https://icon-icons.com/icons2/72/PNG/32/check_14413.png')
}

試したこと

vertical-alignリンク内容

HTMLにimgで画像を挿入しても良いのだが、もっとよい方法があれば教えてもらいたい。

行動規範の内容に同意します

回答3件

ベストアンサー

list-style-imageは、縦位置の調整はできません。
よって、どうしても位置を調整したい場合は、いくつか方法がありますが、回答いたします。

画像そのもので、隙間がある画像にし、位置を調整

ただし、これは、画像を作る際に、融通がきかなくなるので、お勧めできません。

list-style-imageではなく、li要素の背景画像で指定する。

css
1ul{
2  list-style: none;
3}
4li {
5  background: url(https://icon-icons.com/icons2/72/PNG/32/check_14413.png) 0 5px no-repeat; /* 位置指定は、横 縦の順で指定 */
6  padding: 0 0 0 10px; /* 画像の大きさ分隙間を指定 */
7}

li要素の、bofore、after擬似要素を指定し、その背景画像で指定する。

css
1ul{ list-style: none;}
2li {
3  position: relative; /* 絶対座標要素の基準位置をとる */
4}
5li:before {
6  background: url(https://icon-icons.com/icons2/72/PNG/32/check_14413.png) 0 0 no-repeat;
7  content: "";
8  display: block;
9  height: 10px;
10  left: -10px;
11  position: absolute; /* liの範囲外に置くため、絶対座標とする */
12  top: 5px;
13  width: 10px;
14}

質問者さんのおっしゃる通り、HTML上でimg要素にて配置してしまう。

ただし、この方法は、特に動的にHTMLを変化させる時には不向きでしょう。
CSSのみで完結できる、上記二つのいずれかがよいかと。

list-style-imageの位置に関しては、誰しも調整したいと思うものなので、
今後、位置調整が可能になる可能性もあるので、
CSSのアップデートに期待しましょう。
（CSS4の策定が進んでいるそうですよ）

投稿2020/01/20 01:25

miyabi_pudding

総合スコア9528

synth

2020/01/20 12:47

ありがとうございます！思っていた通りのことができました！！！ありがとうございます涙初めて利用したので、回答あるか不安でしたが、とても丁寧に教えてくださりありがとうございます。驚きました！！自分１人では絶対にたどり着けない答えでした。

miyabi_pudding

2020/01/20 12:51

解決してなによりです。同じものであっても、実装方法は一つとは限らないので、柔軟にいろいろな方向から試作することが、完了の近道だったりします。

synth

2020/01/20 13:04

なんていい人なんですか。ありがとうございます！！！

行動規範の内容に同意します

list-style-imageプロパティを使う方法では画像サイズや表示位置を調整できないようです。
background-imageプロパティで背景画像として表示させるといいでしょう。

cssul{
1ul {
2  list-style: none;
3}
4li{
5  padding-left: 40px;
6  line-height: 40px;
7  background: url(https://icon-icons.com/icons2/72/PNG/32/check_14413.png)
8              left 0px top 2px/30px no-repeat;
9}