PNGの箇条書きの位置合わせ

Question

私は自分のウェブサイトにグラフィックの箇条書きの点を表示することができましたが、テキストの中央に揃えるようにポイントを得ることはできません。

これは、テキストに影響を与えない箇条書きイメージに余白を追加する必要があるかのようです。

は、ここで私が働いているページです：http://new.leicesterymca.co.uk/youth-community/our-work/adult-homelessness/

それはのli要素を持つだけで、標準のULの：

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

ありがとう：

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

は、ここに私が持っているCSSのです。あなたのCSSに...

Answer 1

てみてください。この意志は

li:before { 
    vertical-align: middle 
    } 

Answer 2

を

li:before { 
    vertical-align: middle 
} 

を追加