垂直排列内联元素 - 将图像与文本对齐在同一行

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设置为vertical-align：middle并将行高从'px'更改为'em'似乎效果更好。

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 。