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

时间:2014-04-16 23:06:20

标签: html css html-lists

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

bullets

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

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

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

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