이미지와 텍스트를 정렬하지가 제대로

Question

jsFiddle

내가 jsFiddle 위에 만든, 모든 것이 혼란이다. 이미지를 추가하지 않으면 완벽하게 정렬됩니다. 어떻게 해결할 수 있습니까? 다음과 같은 스타일로

<section class="buttons"> 
    <ul> 
     <li><a href="fotografie.html"><span><img src="http://placehold.it/60x60" /></span><span>Fotografie</span><span><img src="http://placehold.it/16x25" /></span></a><hr /></li> 
     <li><a href="360.html"><span><img src="img/Icon-360.png" /></span><span>360&deg; Foto&apos;s</span><span><img src="img/Pijltje.png" /></span></a><hr /></li> 
     <li><a href="plattegrond.html"><span><img src="img/Icon-plattegrond.png" /></span><span>Plattegronden</span><span><img src="img/Pijltje.png" /></span></a><hr /></li> 
     <li><a href="video.html"><span><img src="img/Icon-video.png" /></span><span>Artist Impressions</span><span><img src="img/Pijltje.png" /></span></a><hr /></li> 
     <li><a href="artist_impression.html"><span><img src="img/Icon-Artist-Impression.png" /></span><span>Video</span><span><img src="img/Pijltje.png" /></span></a><hr /></li> 
     <li><a href="inmeten.html"><span><img src="img/Icon-Inmeten.png" /></span><span>Inmeten</span><span><img src="img/Pijltje.png" /></span></a><hr /></li> 
    </ul> 
</section> 

:

.buttons{ 
    display: block; 
    margin: 0 auto; 
} 
.buttons ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.buttons ul li{ 
    display: block; 
    height: 60px; 
    background-color: rgb(214, 55, 45); 
    border-bottom: 1px white; 
} 
.buttons ul li a{ 
    color: rgb(246, 246, 246); 
    text-decoration: none; 
    font-weight: 400; 
    line-height: 60px; 
    font-size: 1.25em; 
    display: block; 
} 
.buttons ul li a span{ 
    color: rgb(246, 246, 246); 
    text-decoration: none; 
    font-size: 1.5em; 
    text-transform: uppercase; 
} 
.buttons ul li a span img{ 
    line-height: 60px; 
    padding-left: 50px; 
} 
.buttons ul li a span:nth-child(2){ 
    padding-left: 100px; 
} 
.buttons ul li a span:last-child{ 
    float: right; 
    position: relative; 
    right: 50px; 
} 

Answer 1

는 코드를 업데이트했습니다.

http://jsfiddle.net/binita07/CSAxH/3/

.buttons{ 
display: block; 
margin: 0 auto; 
} 
.buttons ul{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 
.buttons ul li{ 
display: block; 
height: 70px; 
background-color: rgb(214, 55, 45); 
border-bottom: 1px white; 
} 
.buttons ul li a{ 
color: rgb(246, 246, 246); 
text-decoration: none; 
font-weight: 400; 
line-height: 70px; 
font-size: 1.25em; 
display: block; 
} 
.buttons ul li a span{ 
color: rgb(246, 246, 246); 
text-decoration: none; 
font-size: 1.25em; 
text-transform: uppercase; 
} 
.buttons ul li a span img{ 
line-height: 70px; 
padding-left: 50px; 
display:inline-block; 
vertical-align:middle; 
} 
.buttons ul li a span:nth-child(2){ 
padding-left: 100px; 
} 
.buttons ul li a span:last-child{ 
float: right; 
position: relative; 
right: 50px; 
}