<a> tag</a>底部的位置图片

Question

如何定位图片以与<a>标记的底部对齐？

我有：

<a href=""><img src="" /><span>text</span></a>

目前，图片似乎在<a>上方几个像素。

我试过了：

img { vertical-align: bottom; }

但这让它太过分了。

Answer 1

您可以使用vertical-align: baseline;，它将<img>元素的下边缘沿文本的基线对齐，而不是vertical-align: bottom（正如您所发现的那样，对齐<img>的底部位于父<a>元素的下边缘，比baseline略低，以便容纳g等字母的下降部分}，p，q和y应该去。）

所以，我建议：

a img {
  vertical-align: baseline;
}

<a href="#">
  <img src="http://lorempixel.com/200/200/nightlife" /><span>text</span>
</a>

参考文献：

• vertical-align。

Answer 2

如果您在此处查看我的示例，您可以看到它们实际上是对齐的：http://jsfiddle.net/jzsmy629/2/

添加边框将显示块的位置：

HTML：

<a href=""><img src="http://placehold.it/45x45" /><span>text</span></a>

CSS：

img { vertical-align: bottom; border:solid 1px black; }
span { border: solid 1px black; }