텍스트의 세로 중심을 이미지의 세로 가운데에 맞추려면 어떻게합니까?

Question

세로 가운데 텍스트를 이미지의 수직 중심에 정렬합니까? 다음 코드는 텍스트의기준선을 이미지의 수직 가운데에만 정렬하도록합니다. 나는 균형 감각을 갖고 싶습니다.

http://jsfiddle.net/tokyotech/TBbJF/

출력

HTML

<img src="image.png" /> 
<span>Foo</span> 

CSS

img { 
    vertical-align: middle; 
} 

span { 
    font-size: 3em; 
} 

Answer 1

중간에 세로 맞춤을 지정하지 않았습니다. 스팬 CSS에 vertical-align: middle;을 추가하면 제대로 작동합니다.