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

Question

http://jsfiddle.net/ksHuz/

I'm trying to use a background-image with the <a> element in this fiddle, but the image only center aligns with text in IE. How do I center align the image in all browsers?

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;
}

Answer 1

Adding vertical-align: middle; to the css for the anchor element will center it for standards-based browsers. You might have to use some hack like those found on this page to get it to work in IE6 and IE7: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Edit: Come to think of it, you should probably use an actual image, in which case you could use a img { vertical-align: middle; } a img { vertical-align: middle; } for the same effect (and it should work cross-browser, since img is already inline-block). Background images should ideally be used only for ornamentation, and a button is actual content. For example, what if someone doesn't have css enabled? Image tags allow alt attributes, too, for accessibility.

Answer 2

I think you need to re-think the approach. Your background image is rendering fine inside the <a> but this element is separate from text inside the <td> .

Depending what exactly you're trying to achieve, you could put the text and the link inside a <span> for example, or put the text inside the <a> and style it to not look like a link. You can also position the two on top of each other using positioning and/or floats.