img和文本垂直對齊

Question

<div class="card"> 
<img class='sound' src='https://www.google.com/images/srpr/logo4w.png'> 
<div class='txt'> 
this is a sentence.this is a sentencethis is a sentence. 
</div></div> 

.card{ 
    margin:5px 14px; 
    border:thin solid blue; 
} 
.sound{ 
    width:32px; 
    height:32px; 
    cursor:pointer; 
} 
.txt{ 
    display:inline-block; 
    margin-left:25px; 
    vertical-align:middle; //doesn't work 
    border:thin solid red; 
} 

如何將.txt div對齊到位於.sound圖片的中間位置？ 小提琴是here

Answer 1

把垂直對齊放在.sound？

.card{ 
    margin:5px 14px; 
    border:thin solid blue; 
} 
.sound{ 
    width:32px; 
    height:32px; 
    cursor:pointer; 
    vertical-align:middle; 
} 
.txt{ 
    display:inline-block; 
    margin-left:25px; 
    border:thin solid red; 
} 

http://jsfiddle.net/hWejY/1/

Answer 2

插入vertical-align: middle進級音響

.card{ 
    margin:5px 14px; 
    border:thin solid blue; 
} 
.sound{ 
    width:32px; 
    height:32px; 
    cursor:pointer; 
    vertical-align:middle 
} 
.txt{ 
    display:inline-block; 
    margin-left:25px; 
    vertical-align:middle; 
    border:thin solid red; 
} 

DEMO

Answer 3

vertical-align:middle; 

應該對.sound