自定義子彈的圖像從關閉文本位置

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