Sujet Précédent Sujet Suivant

Centrer les boutons en html et CSS

Résolu/Fermé
Mr-Swiffcraft Messages postés 448 Date d'inscription vendredi 28 décembre 2012 Statut Membre Dernière intervention 22 décembre 2013 - 25 juin 2013 à 20:50
SlyK Messages postés 854 Date d'inscription vendredi 11 mars 2011 Statut Contributeur sécurité Dernière intervention 6 octobre 2014 - 25 juin 2013 à 21:21
Bonjour,
J'aimerais centrer les boutons suivant..

HTML :
<a href="#" class="bouton noir large">Bouton noir</a>
<a href="#" class="bouton noir large">Bouton noir</a>
<a href="#" class="bouton noir large">Bouton noir</a>
CSS :

/* -- Boutons -- */

.bouton {
width:auto;
padding:8px 0;
text-align:center;
text-align:center;
display: inline-block;
float:left;
margin:0 15px 15px 0;
font-size: 1.6em;
text-decoration:none;
border-radius:7px;
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
font-size: 0.85em;
width:120px;
color:#333;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

.bouton.small{font-size: 0.8em; width:100px}
.bouton.medium{font-size: 0.9em; width:120px}
.bouton.large{font-size: 1.1em; width:150px}


/* ************************** Couleurs des boutons / Hover et Active classes *************************** */

/* -- Bouton noir -- */
.bouton.noir, .bouton.noir:active {
background: #444;
background: linear-gradient( #555, #2C2C2C);
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
}
.bouton.noir:hover {
background: #555;
background: -webkit-linear-gradient( #777, #333);
background: -moz-linear-gradient( #777, #333);
background: -ms-linear-gradient( #777, #333);
background: -o-linear-gradient( #777, #333);
background: linear-gradient( #777, #333);
}
.bouton.noir:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton gris -- */
.bouton.gris {
background: #C8C8C8;
background: -webkit-linear-gradient( #C8C8C8, #A0A0A0);
background: -moz-linear-gradient( #C8C8C8, #A0A0A0);
background: -ms-linear-gradient( #C8C8C8, #A0A0A0);
background: -o-linear-gradient( #C8C8C8, #A0A0A0);
background: linear-gradient( #C8C8C8, #A0A0A0);
}
.bouton.gris:hover {
background: #D8D8D8;
background: -webkit-linear-gradient( #D8D8D8, #B0B0B0);
background: -moz-linear-gradient( #D8D8D8, #B0B0B0);
background: -ms-linear-gradient( #D8D8D8, #B0B0B0);
background: -o-linear-gradient( #D8D8D8, #B0B0B0);
background: linear-gradient( #D8D8D8, #B0B0B0);
}
.bouton.gris:active{box-shadow: 1px 1px 10px #999 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton blanc -- */
.bouton.blanc, .bouton.blanc:active {
background: #F8F8F8;
background: -webkit-linear-gradient( #F8F8F8, #D7D7D7);
background: -moz-linear-gradient( #F8F8F8, #D7D7D7);
background: -ms-linear-gradient( #F8F8F8, #D7D7D7);
background: -o-linear-gradient( #F8F8F8, #D7D7D7);
background: linear-gradient( #F8F8F8, #D7D7D7);
text-shadow: 0px 2px 0px rgba( 255, 255, 255, 0.8);
}
.bouton.blanc:hover{
background: #F5F5F5;
background: -webkit-linear-gradient( #FFF, #CCC);
background: -moz-linear-gradient( #FFF, #CCC);
background: -ms-linear-gradient( #FFF, #CCC);
background: -o-linear-gradient( #FFF, #CCC);
background: linear-gradient( #FFF, #CCC);
}
.bouton.blanc:active {box-shadow: 1px 1px 10px #CCC inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton bleu -- */
.bouton.bleu, .bouton.bleu:active{
background: #3C98CF;
background: -webkit-linear-gradient( #3C98CF, #2D74A0);
background: -moz-linear-gradient( #3C98CF, #2D74A0);
background: -ms-linear-gradient( #3C98CF, #2D74A0);
background: -o-linear-gradient( #3C98CF, #2D74A0);
background: linear-gradient( #3C98CF, #2D74A0);
}
.bouton.bleu:hover {
background: #3CA1D3;
background: -webkit-linear-gradient( #3CA1D3, #3386AF);
background: -moz-linear-gradient( #3CA1D3, #3386AF);
background: -ms-linear-gradient( #3CA1D3, #3386AF);
background: -o-linear-gradient( #3CA1D3, #3386AF);
background: linear-gradient( #3CA1D3, #3386AF);
}
.bouton.bleu:active {box-shadow: 1px 1px 10px #1E516B inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton rouge -- */
.bouton.rouge, .bouton.rouge:active{
background: #F4523D;
background: -webkit-linear-gradient( #F4523D, #B43300);
background: -moz-linear-gradient( #F4523D, #B43300);
background: -ms-linear-gradient( #F4523D, #B43300);
background: -o-linear-gradient( #F4523D, #B43300);
background: linear-gradient( #F4523D, #B43300);
}
.bouton.rouge:hover {
background: #FF6A4F;
background: -webkit-linear-gradient( #FF6A4F, #D33B11);
background: -moz-linear-gradient( #FF6A4F, #D33B11);
background: -ms-linear-gradient( #FF6A4F, #D33B11);
background: -o-linear-gradient( #FF6A4F, #D33B11);
background: linear-gradient( #FF6A4F, #D33B11);
}
.bouton.rouge:active {box-shadow: 1px 1px 10px #A83318 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton rouge foncé -- */
.bouton.rouge-fonce {
background: #C53727;
background: -webkit-linear-gradient( #C53727, #A82B22);
background: -moz-linear-gradient( #C53727, #A82B22);
background: -ms-linear-gradient( #C53727, #A82B22);
background: -o-linear-gradient( #C53727, #A82B22);
background: linear-gradient( #C53727, #A82B22);
}
.bouton.rouge-fonce:hover{
background: #D13A2F;
background: -webkit-linear-gradient( #D13A2F, #BC2E2A);
background: -moz-linear-gradient( #D13A2F, #BC2E2A);
background: -ms-linear-gradient( #D13A2F, #BC2E2A);
background: -o-linear-gradient( #D13A2F, #BC2E2A);
background: linear-gradient( #D13A2F, #BC2E2A);
}
.bouton.rouge-fonce:active{box-shadow: 1px 1px 10px #8E2825 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton orange -- */
.bouton.orange, .bouton.orange:active {
background: #F28F22;
background: -webkit-linear-gradient( #FF6A4F, #D33B11);
background: -moz-linear-gradient( #FF6A4F, #D33B11);
background: -ms-linear-gradient( #FF6A4F, #D33B11);
background: -o-linear-gradient( #FF6A4F, #D33B11);
background: linear-gradient( #F28F22, #BD5D19);
}
.bouton.orange:hover{
background: #F79E46;
background: -webkit-linear-gradient( #F79E46, #C96928);
background: -moz-linear-gradient( #F79E46, #C96928);
background: -ms-linear-gradient( #F79E46, #C96928);
background: -o-linear-gradient( #F79E46, #C96928);
background: linear-gradient( #F79E46, #C96928);
}
.bouton.orange:active{box-shadow: 1px 1px 10px #D33B11 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton vert -- */
.bouton.vert {
background: #91BD09;
background: -webkit-linear-gradient( #91BD09, #4E9939);
background: -moz-linear-gradient( #91BD09, #4E9939);
background: -ms-linear-gradient( #91BD09, #4E9939);
background: -o-linear-gradient( #91BD09, #4E9939);
background: linear-gradient( #91BD09, #4E9939);
}
.bouton.vert:hover{
background: #A3C416;
background: -webkit-linear-gradient( #A3C416, #55A53C);
background: -moz-linear-gradient( #A3C416, #55A53C);
background: -ms-linear-gradient( #A3C416, #55A53C);
background: -o-linear-gradient( #A3C416, #55A53C);
background: linear-gradient( #A3C416, #55A53C);
}
.bouton.vert:active{box-shadow: 1px 1px 10px #285419 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton jaune -- */
.bouton.jaune {
background: #FFD217;
background: -webkit-linear-gradient( #FFD217, #FFB515);
background: -moz-linear-gradient( #FFD217, #FFB515);
background: -ms-linear-gradient( #FFD217, #FFB515);
background: -o-linear-gradient( #FFD217, #FFB515);
background: linear-gradient( #FFD217, #FFB515);
}
.bouton.jaune:hover{
background: #FFDE1A;
background: -webkit-linear-gradient( #FFDE1A, #FFC217);
background: -moz-linear-gradient( #FFDE1A, #FFC217);
background: -ms-linear-gradient( #FFDE1A, #FFC217);
background: -o-linear-gradient( #FFDE1A, #FFC217);
background: linear-gradient( #FFDE1A, #FFC217);
}
.bouton.jaune:active{box-shadow: 1px 1px 10px #E5B738 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* -- Bouton violet -- */
.bouton.violet {
background: #D34F8E;
background: -webkit-linear-gradient( #D34F8E, #A9014B);
background: -moz-linear-gradient( #D34F8E, #A9014B);
background: -ms-linear-gradient( #D34F8E, #A9014B);
background: -o-linear-gradient( #D34F8E, #A9014B);
background: linear-gradient( #D34F8E, #A9014B);
}
.bouton.violet:hover{
background: #E256A0;
background: -webkit-linear-gradient( #E256A0, #BC1766);
background: -moz-linear-gradient( #E256A0, #BC1766);
background: -ms-linear-gradient( #E256A0, #BC1766);
background: -o-linear-gradient( #E256A0, #BC1766);
background: linear-gradient( #E256A0, #BC1766);
}
.bouton.violet:active{box-shadow: 1px 1px 10px #7A294F inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

/* ************************** Couleurs des polices *************************** */
.bouton.noir, .bouton.noir:active {color:#000; }
.bouton.gris {color:#747070; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.4);}
.bouton.bouton.gris:hover, .bouton.gris:active {color:#848070;}
.bouton.blanc {color:#BBB; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 1);}
.bouton.bouton.blanc:hover, .bouton.blanc:active {color:#AAA;}
.bouton.bleu {color:#0B4968; text-shadow: 0px 1px 0px rgba( 200, 200, 200, 0.4);}
.bouton.bouton.bleu:hover, .bouton.bleu:active {color:#0B4972;}
.bouton.rouge {color:#8E1015; text-shadow: 0px 1px 0px rgba( 200, 200, 200, 0.4);}
.bouton.rouge:hover, .bouton.rouge:active {color:#8E1000;}
.bouton.rouge-fonce {color:#77140E; text-shadow: 0px 1px 0px rgba( 226, 160, 160, 0.4);}
.bouton.rouge-fonce:hover, .bouton.rouge-fonce:active {color:#8E1010;}
.bouton.orange {color:#7C451F; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
.bouton.orange:hover, .bouton.orange:active {color:#894520;}
.bouton.vert {color:#3D722E; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}
.bouton.vert:hover, .bouton.vert:active {color:#3A6D2C;}
.bouton.jaune {color:#AF772E; text-shadow: 0px 1px 0px rgba( 250, 250, 250, 0.4);}
.bouton.jaune:hover, .bouton.jaune:active {color:#966729;}
.bouton.violet {color:#820845; text-shadow: 0px 1px 0px rgba( 200, 160, 160, 0.4);}
.bouton.violet:hover, .bouton.violet:active {color:#720845;}

3 réponses

Réponse 1 / 3
SlyK Messages postés 854 Date d'inscription vendredi 11 mars 2011 Statut Contributeur sécurité Dernière intervention 6 octobre 2014 147
25 juin 2013 à 21:05
Hello,

Tu as appliqué un float:left à ta classe boutton, il sera donc collé à gauche.

Un petit margin-left: auto et margin-right: auto devrait suffire.


Cordialement.
0
Réponse 2 / 3
Mr-Swiffcraft Messages postés 448 Date d'inscription vendredi 28 décembre 2012 Statut Membre Dernière intervention 22 décembre 2013 25
25 juin 2013 à 21:19
GG!
Merci je n'avais pas pensé à ça !!
0
Réponse 3 / 3
SlyK Messages postés 854 Date d'inscription vendredi 11 mars 2011 Statut Contributeur sécurité Dernière intervention 6 octobre 2014 147
25 juin 2013 à 21:21
Re !

De rien, je passe en résolu.
N'hésite pas si tu as un problème.


Cordialement.
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
ou est la touche shift sur un clavier
Mathis -
Maelstrom -

4 réponses