CSS：垂直对齐li项中的文本，不工作 [英] CSS: vertical align the text in li item , doesn't work
问题描述
我使用列表样式图像的li项目和单行文本。
I use a list-style-image for li items , and a single-line text.
但它看起来不好，所以我想垂直对齐文本到图片。
But it looks bad, so I want to vertically align the text to the middle of the image.
我应该使用vertical-align：middle，right？但它对我来说不行。
I should use vertical-align: middle , right ? But it didn't work for me.
<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>
推荐答案
不使用list-style-image，而是使用background属性设置bullet（注意，我替换了我自己的占位符图像，因为我刚刚从一个小提琴复制/粘贴）。
A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the "bullet" (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the "bullet" image.
这里是小提琴： 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;
}
这篇关于CSS：垂直对齐li项中的文本，不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
