Centrer l'image de fond CSS avec les éléments précédents?

Question

http://jsfiddle.net/ksHuz/

Je suis en train d'utiliser un background-image avec l'élément <a> dans ce violon, mais l'image seul centre aligne avec le texte dans IE. Comment centrer l'image dans tous les navigateurs?

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

Ajout vertical-align: middle; à la css pour l'élément d'ancrage se centrer pour les navigateurs basés sur les standards. Vous pourriez avoir à utiliser un hack comme ceux qu'on trouve sur cette page pour obtenir de travailler dans IE6 et IE7: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Edit: Venez y penser, vous devriez probablement utiliser une image réelle, auquel cas vous pourrait utiliser a img { vertical-align: middle; } pour le même effet (et il devrait fonctionner cross-browser, puisque img est déjà inline-block). Les images de fond devraient idéalement être utilisées uniquement pour l'ornementation, et un bouton est le contenu réel. Par exemple, que se passe-t-il si quelqu'un n'a pas activé css? Les tags d'image permettent également les attributs alt pour l'accessibilité.

Answer 2

Je pense que vous devez repenser l'approche. Votre image d'arrière-plan est très bien à l'intérieur du <a> mais cet élément est distinct du texte à l'intérieur du <td>. En fonction de ce que vous essayez de réaliser, vous pouvez mettre le texte et le lien dans un <span> par exemple, ou mettre le texte à l'intérieur du <a> et le styler pour qu'il ne ressemble pas à un lien. Vous pouvez également positionner les deux les uns sur les autres en utilisant le positionnement et/ou les flotteurs.