web-dev-qa-db-fra.com

Comment centrer horizontalement un élément bouton dans un élément div?

Je ne veux pas ajouter de CSS à mon élément div (par exemple <div style="text-align: center;">). Je veux seulement ajouter du code CSS à l'élément bouton.

<div>
    <button>Button</button>
</div>

Comment puis-je centrer le bouton horizontalement dans ce cas?

htmlcsscentertext-alignmenttext-align
31
weilou
button {
    margin:0 auto;
    display:block;
}

button {
  margin: 0 auto;
  display: block;
}
<div>
  <button>Button</button>
</div>
80
j08691

D'autres ont déjà mentionné le margin: 0 auto;, mais si vous vouliez une explication, le navigateur divise l'espace disponible dans le conteneur dans lequel se trouve votre élément.

Il est également important de souligner que vous devrez probablement également donner à votre élément une largeur pour que cela fonctionne correctement.

Donc, globalement:

button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}
4
Phillip Schmidt

Vous avez besoin display: block; margin: auto; sur le <button>. jsFiddle

3
dezman