html - 在 anchor 内对齐文本

Question

我有一个问题。我试图让 anchor 标记内的文本与 anchor 标记内图像的底部对齐。

现在是这样显示的: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

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

编辑:

尝试使用“vertical-align: bottom”而不是“vertical-align: text-bottom”。 Check out these options from w3schools on the "vertical-align" spec. _{(与 w3c 无关)}

编辑:

使“跨度”文本的行高等于其字体大小。我认为行高实际上更大，这就是为什么您看到它在底部没有完全对齐的原因……因为文本的整个形状/单元格是行高而不是字体大小。要规范化，请像这样使其相等(假设您保持 18px 的字体大小):

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

A page going into some detail explaining this is here.