在锚点中对齐文本

Question

我遇到问题。我试图让锚标签内部的文本对齐锚标签内部图像的底部。

这里现在是如何显示：http://i.imgur.com/ziyri.jpg

下面是它应该如何看：http://i.imgur.com/mcLmo.jpg

我试着在CSS的vertical-align属性的一切，但它不工作。

任何帮助？

这里是要求HTML和CSS代码

#facebook { float: left; margin-top: 10px; margin-right: 10px; height: 22px; } 

#facebook a { font-family: Gerogia; font-size: 18px; font-style: italic; color: #808080;  text-decoration: none; } 

#facebook a img, #facebook a span { 
vertical-align: text-bottom; 
} 

<div id="facebook"> <!-- Start facebook --> 
<a href="#"> 
    <span>Like Us&nbsp;</span><img src="images/facebook.jpg" alt="Facebook" /> 
</a> 
</div> <!-- End facebook --> 

谢谢！

Answer 1

设置锚标记的行高等于“span”文本的字体大小。此外，垂直对齐：底部。

编辑：

尝试使用“垂直对齐：底部”，而不是“垂直对齐：文本底”。 Check out these options from w3schools on the "vertical-align" spec._{（不与W3C相关）}

编辑：

让你的“跨度”文本等于其字体大小的行高。我认为行高实际上更大，这就是为什么你看到它不完全对齐在底部......因为文本的整个形状/单元格是行高而不是字体大小。为了归一化，使其等于像这样（假设你已经把18像素的字体大小）：

#facebook a span { 
    line-height: 18px; 
} 

A page going into some detail explaining this is here.

Answer 2

这里是克里斯Coyier解释是怎么回事这种情况，有大文章：http://css-tricks.com/what-is-vertical-align/