CSS：垂直对齐li项中的文本，不'；行不通_Css_Image

CSS：垂直对齐li项中的文本，不'；行不通

css image

CSS：垂直对齐li项中的文本，不'；行不通,css,image,Css,Image,我对li项使用列表样式的图像，并使用单行文本但是它看起来很糟糕，所以我想将文本垂直对齐到图像的中间我应该使用垂直对齐：中间对齐，对吗？但这对我不起作用 <html> <head> <title> This is an demo </title> <style> body { background-color: #464443;

我对li项使用列表样式的图像，并使用单行文本

但是它看起来很糟糕，所以我想将文本垂直对齐到图像的中间

我应该使用垂直对齐：中间对齐，对吗？但这对我不起作用

<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>


这是一个演示
身体{
背景色：#464443；
颜色：白色；
}
保险商实验室{
列表样式图像：url（'bg.png'）；
}
李{
垂直对齐：中间对齐；
}

abc
abc
abc
abc

一个令人满意的方法（imo）是不使用列表样式的图像，而是使用背景属性设置“项目符号”（注意，我替换了我自己的占位符图像，因为我只是从小提琴上复制/粘贴）。根据“bullet”图像的大小，填充和其他尺寸将有所不同

这是小提琴：

正文{
背景色：#464443；
颜色：白色；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
}
李{
背景：url（'http://lorempixel.com/output/technics-q-c-32-32-1.jpg")不重复;；
线高：32px；
垂直对齐：中间对齐；
左侧填充：40px；
}

将线条高度添加到li。确保它与图像的高度相同

这就是我要用的。我不使用垂直对齐，而是使用填充将文本移动到我想要的位置

    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;
    }

同意

background

是一种更可靠、更准确的方法Muhd，你可能是对的，但这只取决于定义：多行代码“工作”很好，但项目符号总是在顶部。不过，这在很大程度上是项目符号列表的标准。除非我有误解，如果你用我的小提琴来表示问题，我很想看看@Muhd也许使用精灵偏移技术可以解决这个问题？

    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;
    }