在锚内对齐文本

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"文本的字体大小.另外,vertical-align:bottom.

编辑:

尝试使用"vertical-align:bottom"而不是"vertical-align:text-bottom".在"垂直对齐"规范中查看w3schools的这些选项. _{(与w3c无关)}

编辑:

使"span"文本的行高等于其font-size.我认为线高实际上更大,这就是为什么你看到它在底部没有完美对齐...因为文本的整个形状/单元格是行高而不是字体大小.要标准化,请使其与此相同(假设您保持字体大小为18px):

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

一页详细解释了这一点.