自定义项目符号图像位置偏离文本答案

【问题标题】：Custom bullet image position off from text自定义项目符号图像位置偏离文本
【发布时间】：2014-04-16 23:06:20
【问题描述】：

好的，所以我有一个列表，我使用图像作为项目符号，但项目符号后面的文本位于图像的底部，就像这样......

这是我的 HTML：

<div class="serviceticks">
    <ul>
        <li>Web Design</li>
        <li>HTML</li>
        <li>CSS3</li>
        <li>PHP5</li>
    <ul>
</div>

这是我的 CSS

.serviceticks {
    vertical-align:middle;
    height: 100px;
    width: 95%;
}

    .serviceticks li {
        float: left;
        padding-right: 30px;
        padding-left: 10px;
        font-size: 20px;
        list-style-image: url('../images/white-tick.png');
    }

有谁知道我如何让文字与图片保持一致？

【问题讨论】：

标签： html css html-lists

【解决方案1】：

您可以使用vertical-align 更改文本在行内的位置。为了让它看起来像您想要的那样，您需要使用 line-height 属性将可用空间设置为与您正在使用的图像相同的高度。

尝试将vertical-align: top; line-height: 35px; 添加到li 规则

【讨论】：

【解决方案2】：

从@swider 答案扩展...

以下应该做到这一点。您可能不得不使用line-height 值...

.serviceticks ul {
    list-style-image: url(images/white-tick.png);
}

.serviceticks li {
    vertical-align: top; 
    line-height: 50px;
}

【讨论】：