インライン要素を垂直に整列する - テキストと同じ行に画像を整列する

Question

インライン要素を縦に並べるのに問題がある - 兄弟要素の流れに悪影響を及ぼすことなく、

JSFiddle

HTML：

<p><span class="purple">phone:</span> 123.123.1234</p> 
<p><span class="green">email:</span> <img src="http://www.illuminart.com/tests/img/email.png" alt="" style="width:172px; height:13px" /></p> 
<p><span class="purple">phone:</span> 123.123.1234</p> 

CSS：

body { 
    font-family: Verdana, Tahoma, Arial; 
    font-size: 10pt; 
} 
p {  
    line-height: 15px; 
} 
span {} 
img {} 

更新：より良い動作するように見え、中央と「ピクセル」から「日」に行の高さを変更：は垂直整列するIMGを設定します。

CSS：

body { 
    font-family: Verdana, Tahoma, Arial; 
    font-size: 10pt; 
} 
p {  
    line-height: 1.4em; 
} 
span {} 
img { 
    vertical-align: middle; 
} 

Answer 1

これをチェックアウト：http://jsfiddle.net/c8C8C/1/。これが欲しいですか？

私はちょうどの垂直整列：中間のをあなたのimgタグのスタイル属性に加えてください。