将图像置于锚元素中心

Question

我有一个看起来像这样的锚元素

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

我希望锚元素的图像和文本垂直对齐。我尝试添加vertical-align（css），padding，margin，ets，但图像不会垂直对齐文本。

Answer 1

垂直对齐仅适用于兄弟元素。这应该有效：

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

使用CSS：

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

Answer 2

你的意思是“垂直对齐”？它们应该彼此相邻，还是在它们之上？如果彼此相邻，文本是否应与图像的顶部，中心或底部对齐？

如果您的问题是它们显示在彼此之上而不是旁边，请将以下内容添加到您的CSS中：

a img { display: inline; }

如果问题恰恰相反，请添加：

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

看看是否有帮助。

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>