html - 自定义元素符号图像位置偏离文本

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