CSS：li項目のテキストを垂直に整列させてもうまくいきません

私はli項目にlist-style-imageを使用し、単一行のテキストを使用します。CSS：li項目のテキストを垂直に整列させてもうまくいきません

enter image description here

しかし、それは悪いに見えるので、私は垂直方向に画像の中央にテキストを整列します。

私はvertical-align：mid、rightを使用する必要がありますか？しかし、それは私にとってはうまくいかなかった。

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      body { 
       background-color: #464443; 
       color: white; 
      } 
      ul { 
       list-style-image: url('bg.png'); 
      } 

      li { 
       vertical-align: middle; 
      } 

     </style> 
    </head> 

    <body> 
     <ul> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
     </ul> 
    </body> 
</html>

出典

2012-04-09 daisy

これを行うには満足のいく方法（IMO）は、リストスタイルイメージを使用しないことです代わりに「弾丸」を設定するためにbackgroundプロパティを使用して（私はちょうどコピーしたので、私は自分のプレースホルダ画像を置換注意します/フィドルから貼り付ける）。パディングやその他の寸法は、「弾丸」画像のサイズによって異なります。ここで

はフィドルです：http://jsfiddle.net/huBpa/1/

body { 
    background-color: #464443; 
    color: white; 
} 

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat; 
    line-height: 32px; 
    vertical-align: middle; 
    padding-left: 40px; 
}

出典

2012-04-09 04:08:50

が合意した。 'background'ははるかに信頼できる+正確な方法です。 – benesch

テキストが複数行の場合は動作しません。 – Muhd

あなたは正しいかもしれませんが、定義によるだけです：それは複数の行でうまく機能しますが、弾丸は常に一番上にあります。しかし、これは非常に多くの箇条書きリストの標準です。私が誤解していない限り、その場合、問題を示すために私のフィドルのフォークを行うと、私はそれを見ることに興味があるでしょう！ –

-1

リーに行の高さを追加します。それはこれは私が使用するものです画像

li { 
      vertical-align: middle; 
      line-height: 30px; 
     }

出典

2012-04-09 04:11:13 Ray

Nope：http://jsfiddle.net/huBpa/ –

と同じ高さであることを確認してください。私は縦の揃えを使用せず、代わりにテキストを移動させるためにパディングを使用して、どこにいても欲しいと思っています。

ul { 
      list-style: none; 
      margin-left: 0; 
      padding-left: 0; 
    } 

    li { 
      padding: 10px 10px 15px 20px; 
      background-image: url(images/arrow.png); 
      background-repeat: no-repeat; 
      background-position: 0px; 
    }

出典

2012-04-09 04:51:05 tastybento

CSS：li項目のテキストを垂直に整列させてもうまくいきません

答えて

関連する問題