在<a> tag

Question

This is a continuation of Align elements inside an <a> tag vertically

内水平对齐div（具有背景图像）

我遇到的问题是，在某些情况下，我没有来自<i>标签的图标，但我有背景图片

所以标记是这样的：

<a href="/accessoires" style="text-align: center;">
    <div class="accessoires"></div>
    <span style="display: block ;">ACCESSOIRES</span>
</a>

accessoires CSS类正在处理图像（来自精灵的background）。

但正如您所看到的，<div>未居中，它与左侧对齐。

所以我要找的是一种在<a>标签内水平居中对齐div的方法。

P.S。它不能是<div> - 只要我能保持我的CSS /背景/精灵魔法

寻找兼容IE9的解决方案。

Answer 1

在html5之前将div放在元素内是没有语义上的。

我建议使用i元素作为图标，因为这是一种常用的约定。

text-align: center;仅适用于内联元素，这就是为什么它不会在示例中居中div的原因。使用display: inline-block;应该可以解决问题。

如果图标没有使用精灵表，您可以将div设置为100％宽，并使用background-position将其居中。