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

Question

好的，所以我有一个列表，我正在使用图像作为子弹，但子弹后面的文字位于图像的底部，就像这样......

这是我的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');
    }

有谁知道我如何让文字与图像一致？

Answer 1

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

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

Answer 2

延伸@swider回答......

以下应该这样做。您可能必须使用line-height值...

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

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