Aタグ内のテキストを同じAタグ内の画像に関連付ける

Question

Aタグ内のテキストをイメージに対してどのように揃えることができますか？これは私が立ち往生している場所です。私が何をしようと、それは常に上の境界からテキストを整列するようだ。テキストの中央を画像の中央に合わせて欲しい。

問題は、タグ内の画像がテキストよりも背が高いということのようだ、と、テキストだけのベースラインに座って何に関係なく..

CSS：

.ty-bar { 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 32; 
    height: 40px; 
    background-color: #AAA; 
    z-index: 50; 
} 

.ty-bar ul { 
    list-style-type: none; 
    margin: 8px; 
    padding: 0; 
    border: 1px solid green; 
    vertical-align: middle; 
} 

.ty-bar-left { 
    float: left; 
} 

.ty-bar-right { 
    float: right; 
} 

HTML ：

<div class="ty-bar"> 
    <ul class="ty-bar-left"> 
    <li> 

     <a href="#"> 
     <img src="https://cdn4.iconfinder.com/data/icons/miu/24/circle-back-arrow-outline-stroke-32.png" width="24" height="24"> Back 
     </a> 

    </li> 
    </ul> 

    <ul class="ty-bar-right"> 
    <li> 
     <img src="https://cdn2.iconfinder.com/data/icons/files-folders-3/24/files-folders-52-32.png" width="24" height="24"> 
    </li> 
    </ul> 
</div> 

Answer 1

vertical-align: middle;を画像に追加します。

JSfiddle

Here's an answer、あなたは続きを読むが、基本的にすることができます：それはすべて1行でありますので

を、それは本当にあなたが整列したい画像、 ないテキストです。