css - SPAN的CSS垂直对齐

Question

我似乎无法在我的真实基本代码中垂直对齐跨度。

这是CSS：

.BigGreyTitle {font-size: 22px;
    color: #676767;
    font-weight: bolder;
}

.f1 {
    font-size: 12px;
    font-family: arial,'Lucida Grande','Bitstream Vera Sans',verdana,sans-serif;
}

.mainlink-u a {
    color: #EF3834;
    text-decoration: underline;
}

这是 HTML 标记：

<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
  <tr>
    <td class="BigGreyTitle" align="left">All Members In Montana</td>
    <td align="right">
    <span><img src="http://www.coalprepdir.com/images/schemes/red/ret_arrow.png" style="border:none" alt=""/></span>
    <span style="padding-left:5px" class="f1 mainlink-u"><a href="distribution_us_stats.asp">Go Back To US Distribution</a></span></td>
  </tr>
</table>

看看：http: //jsfiddle.net/sJA92/

任何帮助使这些垂直对齐将不胜感激..

谢谢！

Answer 1

添加规则以将图像垂直对齐到中间。

img {
    vertical-align:middle;
}

jsFiddle 示例

Answer 2

span {
    vertical-align: top;
}

http://jsfiddle.net/sJA92/1/

对于另一个级别的垂直对齐（基线、中间、底部...），您需要使用填充和边距调整它们。

Answer 3

我认为你需要浮动跨度。我也将 td 设置为对齐中间。请参阅此链接：

http://jsfiddle.net/sJA92/6/

td{
    vertical-align:middle
}
td span{
   float: left
}