CSS：垂直對齊li項中的文本，不起作用

我對li項和單行文本使用list-style-image。CSS：垂直對齊li項中的文本，不起作用

enter image description here

但它看起來不好，所以我要垂直對齊文本圖像的中間。

我應該使用vertical-align：middle，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）是不使用列表樣式圖像，而不是使用背景屬性設置「子彈頭」（請注意我取代我自己的圖像佔位符，因爲我只是複製/從小提琴中粘貼）。您的填充和其他尺寸將根據「子彈」圖像的大小而變化。

這裏的小提琴：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

同意。 '背景'是一種更加可靠且準確的方法 – benesch 2012-04-09 04:22:47

如果文本是多行，則不起作用。 – Muhd 2013-05-16 21:47:12

你可能是對的，穆哈德，但只取決於定義：它「工作」很好，多行，但子彈總是在頂部。不過，這非常符合項目列表的標準。除非我誤解，在這種情況下，如果你用我的小提琴叉子來展示問題，我很樂意看到它！ – 2013-05-23 18:20:19

-1

添加的line-height李。確保它是相同的高度圖像

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

來源

2012-04-09 04:11:13 Ray

Nope：http://jsfiddle.net/huBpa/ – 2012-04-09 04:16:19

這是我會用什麼。我不使用垂直對齊，而是使用填充將文本移動到任何我想要的位置。

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項中的文本，不起作用

回答

相關問題