Centrer horizontalement un block de largeur variable

[Nenex]

Slt

Pour commencer voici les codes :

<a  class="bouton jcepopup noicon" href="#" target="_blank">Bouton</a>

.bouton {

	display:block;

	text-align:center;

}


.bouton {

	font-family:Verdana,Helvetica,Sans-Serif;

	color: #fff !important;

	font-weight:bold;

	font-size: 1.3em;

	text-decoration: none !important;

	border: 1px #000 solid ;

	border-radius:7px;

	padding: 3px 10px;

	background-color:#6a04aa;

	transition: all 2s;


	-webkit-transition: all 2s ;

	-moz-transition: all 2s ;

	-ms-transition: all 2s ;

	-o-transition: all 2s ;

}


.bouton:hover {

	color:#000 !important; /* ccff00 */

	border: 1px #000 solid ;

}

Je voudrais centrer mes boutons, mais leurs largeur peut etre tres variable suivant le texte (et je veux le texte sur une ligne). Je ne peux donc pas utiliser margin-left:auto; et margin-right:auto;.

Avec display:block; le texte est centre, mais le bouton prend toute la largeur. Si je n'utilise pas display:block; (donc remetre la balise <a> en inline) le bouton s'elargit suivant le texte, mais il n'est pas centre (le texte dans le bouton oui, mis pas le bouton lui-meme).

J'espere avoir ete clair dans mes explications .

Merci d'avance pour votre aide.

[roky974]

D'après ce que j'ai compris tu veux centrer tes boutons.

Personnellement, j'aurai fait comme sa :

<div class="bouton_container"> <!-- Un div pour contenir les boutons à centrer -->


<a  class="bouton jcepopup noicon" href="#" target="_blank">Bouton</a>

<a  class="bouton jcepopup noicon" href="#" target="_blank">Bouton numéro 2</a>

<a  class="bouton jcepopup noicon" href="#" target="_blank">Bouton #3 </a>

<a  class="bouton jcepopup noicon" href="#" target="_blank">Bouton le 4</a>


</div> 

Ensuite pour le css :

.bouton { text-align:center }

.bouton_container { text-align: center }

Modifié 10 Mai 2014 par roky974

[Nenex]

Merci pour ta reponse. Par contre j'ai oublie de preciser dans mon 1e message que c'est de "simple" bouton pour, par exemple, telecharger un document. C'est pas pour un menu. J'avais fait comme toi avant, j'avais mis ma balise <a> dans un <div>. Mais je me suis dit que c'etait aussi bien sans la <div>. Avec la <div> le centrage se fait facilement.

[Dudu]

Salut

Qu'y a-t-il comme élément parent de ton lien ?

Si tu as la possibilité de nous publier le code entier de ta page, c'est encore mieux...

[Nenex]

Le code entier de la page etant trop long, je ne peux pas le mettre dans le message. Mais j'arrive pas a trouver comment mettre un fichier en piece jointe. J'ai bien trouver pour gerer ces piece jointe.Je suis miro ?

Je suis sous joomla, peut etre que le code htrml de l'article peut suffire ?

Modifié 12 Mai 2014 par Nenex

[captain_torche]

Sinon, tu peux coller le truc sur un site comme jsfiddle.

[Nenex]

captain_torche j'ai pas tout compris au site, mais merci quant meme . J'ai mis le code dans un fichier et le fichier sur un site de partage. Voici le lien : http://paf.im/svA4a