CSS list-style-image

Question

CSS list-style-imageタグで問題が発生しました。私のリストイメージは大きかったし、背後にあるテキストはスタイルタグの下部にプッシュダウンされました。

 
| 
| 
| here 

と私はなりたい：：

 
| 
| here 
| 

Answer 1

あなたの質問は少し不明であるが、それはあなたのように聞こえるそれはこのようになりましバック中央の

内のビットにそれを修正背景画像を見る必要があるかもしれない。リストスタイルの画像よりも（または補完しやすい）

Answer 2

問題のli要素の線高を増やすだけです。

#iconlist li { 
    line-height: 2em; 
} 

また、keithjgrantが示唆しているように、代わりに背景画像を使用します。リストイメージは、さまざまなブラウザでは矛盾して配置されます。したがって、このようなものを使用します。

#iconlist li { 
    padding-left: 22px; 
    background: url(20x20-icon.png) left center no-repeat; 
    line-height: 22px; 
    list-style: none; 
} 

Answer 3

これを達成するための唯一の現実的な方法はbackground-imageである：

ul li { 
    background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;; 
    list-style-position: outside; 
    padding-left: 250px; 
    line-height: 160px; /* vertical height of image */ 
} 

JS Fiddle demo。しかし、fail badly if the text of the li wraps to a second (or third) line。

Answer 4

は、vertical-align: middle;（CSS）

Answer 5

は、リストスタイルの画像を設定し忘れて、次のCSSを使用して...

ul#example li { 
    list-style-type: none; 
} 

/* create new marker */ 
ul#example li:before { 
    display: marker; 
    content: url("new_marker.png"); 
    /* set the following to fit your needs */ 
    vertical-align: 3px; 
    padding-left: 2px; 
    padding-right: 12px; 
} 

注垂直整列スタイルを試してみて上向きにテキストをプッシュするために、マイナスの数値に設定します。

Source of answer.