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

回答

相关问题