在鏈接列表中對齊圖標和文本（css）

everyone。已經搜索了一段時間，但我無法找到答案..在鏈接列表中對齊圖標和文本（css）

我想要的是，有一個鏈接的標題，可以有圖像，文本和圖像後面的文本，並對齊他們。。

的問題是，該文本是由它後圖像八方通fushed下來..

.header_wrap { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 50px; 
    border-bottom: solid 1px grey; 
    background: black; 
    } 
    .header_wrap ul { 
    margin: 0; 
    list-style: none; 
    } 
    .header_wrap ul li { 
    display: inline-block; 
    } 
    .header_wrap ul li a { 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    height: 50px; 
    color: white; 
    } 
    .header_wrap ul li a span { 
    padding: 0 0 0 8px; 
    } 
    .header_wrap ul li a img { 
    vertical-align: middle; 
    padding: 3px 0 0 0; 
    width: 45px; 
    height: 45px; 
    } 
    .header_wrap ul li a:hover { 
    background: grey; 
    } 


<div class="header_wrap"> 
    <ul> 
    <li class="img"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/></a></li> 
    <li class="img_txt"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/><span>Link</span></a></li> 
    <li class="txt"><a href="#">link</a></li> 
    <li class="img"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/></a></li> 
    <li class="img_txt"><a href="#"><img src="http://goo.gl/KLntA5" alt=""/><span>Link</span></a></li> 
    <li class="txt"><a href="#">link</a></li> 
    </ul> 
</div>

下面是代碼：

http://jsfiddle.net/fAFZ9/

我要的是，有「純文本鏈接」懸停是一樣的其他鏈接.. 也就是說，對齊菜單的頂部，並有文字居中..

希望，有人能夠幫助我這個..

來源

2013-09-22 ExClouds