PNG項目符號點對齊

Question

我已經設法在我的網站上顯示圖形項目符號點，但我無法得到正確對齊文本中間的點。

這就好像我只需要爲不影響文本的子彈圖像添加邊距即可。

這裏是我工作的頁面：http://new.leicesterymca.co.uk/youth-community/our-work/adult-homelessness/

這只是一個標準UL與li元素：

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ul> 

這裏的CSS我有：

ul { 
    list-style: none; 
    padding:0; 
    margin:40px 0 40px 0; 
} 

li { 
    margin-bottom: 20px; 
    padding-left: 2.3em; 
    text-indent: -2.3em; 
} 

li:before { 
    /* -content: "●";-*/ 
    content:""; 
    background-image: url('http://new.leicesterymca.co.uk/wp-content/uploads/2017/03/arrow-bullet.png'); 
    background-size: 20px 20px; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    margin-right: .7em; 
} 

a { 
    text-decoration: none; 
    color: #2f9395; 
} 

a:hover { 
    color: #163a52; 
} 

感謝。

Answer 1

嘗試增加...

li:before { 
    vertical-align: middle 
} 

你的CSS

Answer 2

這將適用於你

li:before { 
    vertical-align: middle 
    }