用前面的元素居中CSS背景图像？

http://jsfiddle.net/ksHuz/用前面的元素居中CSS背景图像？

我试图用一个背景图片，在此小提琴的<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; 
}

来源

2010-11-02 Stefan Kendall

我没有看到你的例子中的问题。入住Chrome和IE6。 – 2010-11-02 20:19:58

也许指定一个'background-position'？ – 2010-11-02 20:25:03

图像在Chrome中上对齐，在IE中居中对齐。 – 2010-11-02 20:28:37

添加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属性的可访问性。

来源

2010-11-02 21:05:49 theazureshadow

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

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

来源

2010-11-02 21:39:10 Tom

用前面的元素居中CSS背景图像？

回答

相关问题