在锚点元素内居中图片

Question

我有一个锚点元素，长这样

<a href="url"><img src="imgurl"/>Text</a> 

我希望锚点元素的图像和文本能够垂直对齐。我尝试添加了vertical-align（CSS），填充，边距等，但是图像仍无法与文本垂直对齐。

- NullReference

Answer 1

垂直对齐只适用于兄弟元素。以下代码应该有效：

<a href="url"><img scr="imgurl"/><span>Text</span></a>

使用CSS：

a img, a span { vertical-align: middle; }

- DisgruntledGoat

---

谢谢，非常好用。我就知道这一定是个简单的问题。 - NullReference

Answer 2

你所说的“垂直对齐”是什么意思？它们应该并排还是上下堆叠？如果是并排，文本与图像应该靠顶部、中间还是底部对齐？

如果你的问题在于它们堆叠在一起而不是并排显示，请在你的 CSS 中添加以下内容：

a img { display: inline; }

如果您的问题是相反的，请添加以下内容：

a img { display: block; clear: both; }

看看这是否有帮助。

- Tomas Aschan

Answer 3

将图像和图标与锚标签对齐的正确方法是

在您的CSS中

a {
   background: transparent url(/images/your_image) scroll no-repeat left center;
   padding: 2px 0px 2px 20px; //fit as you need
}

在你的HTML中

<a href="url">Text</a>

- Pablo V

---

这个方法为什么是正确的方式？ - Pysis