将 CSS 背景图像与前面的元素居中？答案

【问题标题】：Centering CSS background-image with preceeding elements?将 CSS 背景图像与前面的元素居中？
【发布时间】：2011-05-04 03:52:50
【问题描述】：

http://jsfiddle.net/ksHuz/

我正在尝试在此小提琴中使用带有 <a> 元素的背景图像，但图像仅居中与 IE 中的文本对齐。如何在所有浏览器中居中对齐图像？

HTML：

<table>
    <tr>
        <td>
           <select>
               <option>1</option>
                              <option>33</option>
                              <option>c</option>
                              <option>a</option>
                              <option>aaef</option>
            </select> 
            text
            <a href="#"></a>
        </td>
    </tr>
</table>

CSS：

a{
 background-image: url(http://stefankendall.com/files/excel.png);   
    width: 16px;
    height: 16px;
    display: inline-block;
}

【问题讨论】：

我在您的示例中看不到问题。已在 Chrome 和 IE6 中检查。
也许指定background-position？
图片在 chrome 中为上对齐，在 IE 中为中对齐。
我尝试了各种背景位置，但它们似乎没有任何影响。
你说的是（垂直？）锚点内背景图像的对齐方式，还是锚点相对于text的对齐方式？

标签： html css button html-table background-image

【解决方案1】：

将vertical-align: middle; 添加到锚元素的css 将使基于标准的浏览器居中。您可能需要使用本页面上的一些技巧才能使其在 IE6 和 IE7 中运行：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

编辑：想一想，您可能应该使用实际图像，在这种情况下，您可以使用 a img { vertical-align: middle; } 获得相同的效果（它应该可以跨浏览器工作，因为 img已经是内联块）。理想情况下，背景图像应仅用于装饰，按钮是实际内容。例如，如果有人没有启用 css 怎么办？图像标签也允许alt 属性，以实现可访问性。

【讨论】：

【解决方案2】：

我认为您需要重新考虑这种方法。您的背景图像在 <a> 内渲染良好，但此元素与 <td> 内的文本是分开的。

例如，根据您要达到的目标，您可以将文本和链接放在<span> 中，或者将文本放在<a> 中并将其样式设置为看起来不像链接。您还可以使用定位和/或浮动将两者放在一起。

【讨论】：