CSS:垂直对齐li项中的文本,不起作用
我对li项使用list-style-image,并使用单行文本.
但它看起来很糟糕,所以我想将文本垂直对齐到图像的中间.
我应该使用vertical-align:middle,对吧？但它对我不起作用.
<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>
Gre*_*tit 14
一个令人满意的方法(imo)是不使用list-style-image,而是使用background属性来设置"bullet"(注意我替换了我自己的占位符图像,因为我刚从小提琴中复制/粘贴).您的填充和其他尺寸将根据"子弹"图像的大小而有所不同.
这是小提琴: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;
}?