링크 목록에서 아이콘과 텍스트를 맞 춥니 다 (CSS)

Question

모두. 잠시 동안 이걸 검색했지만 답변을 찾을 수 없습니다 ..

내가 원하는 것은 링크가있는 헤더가 있고 이미지, 텍스트 및 이미지 뒤에 텍스트가 있고 가로로 정렬 할 수 있습니다. .

http://jsfiddle.net/fAFZ9/

0,123,516 :

문제는 텍스트에 allways 그 후의 화상별로 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> 

는 코드

내가 원하는 것은 .. 다른 링크에서와 동일하게 "텍스트 전용 링크"에 호버을 가지고, 메뉴의 상단에 정렬 및 텍스트를 중심으로 한이다 ..

희망입니다 사람이 나를 도울 수있을 것입니다 ..

이

Answer 1

단순히 리튬 요소에

line-height: 45px; 

을 추가 http://jsfiddle.net/fAFZ9/1/

Answer 2

가 display: table-cell; vertical-align: middle;를 추가하여 .header_wrap ul li a

demo

Answer 3

나는 바이올린 http://jsfiddle.net/fAFZ9/6/에 CSS을 업데이트했습니다. 지금 그 완벽;)