Alignement des boutons de la porte coulissante CSS centre

Question

J'ai besoin d'aide pour aligner les boutons CSS. J'ai essayé plusieurs variations et je ne peux pas centrer mon bouton comme je le veux.

Tout d'abord, un coup d'oeil à cette adresse: http://www.front-end-developer.net/cssbuttons/example.htm

J'utilise 2 images pour former un bouton (cela pourrait se faire sur 1 image, mais dans ce cas, nous avons deux). Tout fonctionne comme prévu tant que nous appliquons float:left ou float:right à l'élément div parent, pour 'limiter' la largeur du div et le fermer dès que le contenu du div se termine. Vous pouvez enlever float: à gauche du bouton pour voir ce que je veux dire.

Mais qu'en est-il des boutons centraux? Je ne peux pas ajouter float: left/right parce que je veux l'aligner au milieu.

En théorie, je pourrais mettre

{ 
    width:XXpx; 
    margin:0 auto; 
} 

Et j'obtenir ce que vous pouvez voir sur cette photo:

alt text http://www.front-end-developer.net/cssbuttons/cssbuttonerror.png

Mais je ne sais pas la longueur du texte à l'intérieur . Ayant des traductions différentes, mon bouton peut être très court, ou 5 fois plus long.

J'ai aussi essayé d'utiliser <span> au lieu de <div>, mais les éléments en ligne, malheureusement imbriqués ne respectent pas leur rembourrage correctement ...

Et oui, je dois utiliser <a> l'intérieur, de sorte que les boutons sont accessibles par les robots web .

Je suis vraiment bloqué sur celui-ci.

Answer 1

.button {display:inline-block;} 

Semble faire l'affaire.

inline-block navigateur-support: http://www.quirksmode.org/css/display.html

En savoir plus sur la façon de contourner les problèmes de navigateur liés à inline-block: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/