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”。 Check out these options from w3schools on the "vertical-align" spec. _{（与w3c无关）}

修改

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

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

A page going into some detail explaining this is here.

Answer 2

Chris Coyier撰写了一篇很棒的文章，解释了这种情况：http://css-tricks.com/what-is-vertical-align/

在锚内对齐文本

2 个答案: