垂直排列行內元素 - 將圖像與文本在同一行上對齊

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標籤樣式屬性中添加了vertical-align：middle。