在锚元素中居中图像

【问题标题】：Centering an image within an anchor element在锚元素中居中图像
【发布时间】：2017-08-23 05:28:25
【问题描述】：

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

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

我希望锚元素的图像和文本垂直对齐。我尝试添加垂直对齐（css）、填充、边距、ets，但图像不会与文本垂直对齐。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

使用 CSS：

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

【讨论】：

【解决方案2】：

“垂直对齐”是什么意思？它们应该彼此相邻还是在上面？在相邻的情况下，文字应该与图像的顶部、中心还是底部对齐？

如果您的问题是它们彼此重叠显示而不是相邻显示，请将以下内容添加到您的 css：

a img { display: inline; }

如果你的问题是相反的，添加这个：

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

看看有没有帮助。

【讨论】：

【解决方案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>

【讨论】：