css - 垂直对齐文本与电子邮件签名表格中的图像？

Question

我使用 CSS 创建了一个电子邮件签名，但在将文本垂直对齐到一个简单的图像旁边时遇到了问题。

我已经尝试过 valign 和 Vetical-align，但两者都不起作用。谁能帮忙？

目前，我已经快速总结了我的代码中的内容。

http://jsfiddle.net/J5LTw/1/

或者只是在代码中：

<table style="width:500px; font-family:century gothic; font-size:10">
<tr><td><p style="color: #184d95; font-weight:bold">Company</p></td></tr>
<tr><td><img src="http://i42.tinypic.com/xauvbp/5.jpg" border="0" width="20" height="20"> Phone</td></tr>
<tr><td><img src="http://i44.tinypic.com/2d2f6kx.jpg" border="0" width="20" height="20"><a href="mailto:info@mail.nl" style="color:black; text-decoration:none">Mail</a></td></tr>
<tr><td><img src="http://i41.tinypic.com/2j4ebg5.jpg" border="0" width="20" height="20"> <a href="http://site.nl" style="color:black; text-decoration:none">Site</a></td></tr>
</table>

谢谢！

Answer 1

您好用这段代码测试：

<table style="width:500px; font-family:century gothic; font-size:10">
<tr><td><p style="color: #184d95; font-weight:bold; height:20px; vertical-align:middle;">Company</p></td></tr>
<tr><td><img src="http://i42.tinypic.com/xauvbp/5.jpg" border="0" width="20" height="20" style="vertical-align:middle;">&nbsp;Phone</td></tr>
<tr><td><img src="http://i44.tinypic.com/2d2f6kx.jpg" border="0" width="20" height="20" style="vertical-align:middle;"><a href="mailto:info@mail.nl" style="color:black; text-decoration:none; height:20px; vertical-align:middle;">&nbsp;Mail</a></td></tr>
<tr><td><img src="http://i41.tinypic.com/2j4ebg5.jpg" border="0" width="20" height="20" style="vertical-align:middle;"><a href="http://site.nl" style="color:black; text-decoration:none; height:20px; vertical-align:middle;">&nbsp;Site</a></td></tr>
</table>

Answer 2

尝试这个

http://jsfiddle.net/J5LTw/2/

如果你MAKE CLASS请使用这个 CSS

table tr img{
    height:20px;
    vertical-align:middle;
}

如果你写INLINE CSS请使用

http://jsfiddle.net/J5LTw/3/

<table style="width:500px; font-family:century gothic; font-size:10">
<tr><td><p style="color: #184d95; font-weight:bold">Company</p></td></tr>
<tr><td><img src="http://i42.tinypic.com/xauvbp/5.jpg" border="0" width="20" height="20" style="vertical-align:middle;"> Phone</td></tr>
<tr><td><img src="http://i44.tinypic.com/2d2f6kx.jpg" border="0" width="20" height="20"  style="vertical-align:middle;"> <a href="mailto:info@mail.nl" style="color:black; text-decoration:none">Mail</a></td></tr>
<tr><td><img src="http://i41.tinypic.com/2j4ebg5.jpg" border="0" width="20" height="20"  style="vertical-align:middle;"> <a href="http://mennescreative.nl" style="color:black; text-decoration:none">Site</a></td></tr>
</table>