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

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。