284 votes

Comment centrer un bouton dans un div ?

J'ai une division dont la largeur est de 100 %.

J'aimerais y centrer un bouton, comment puis-je faire ?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

445voto

Loktar Points 17625

Réponse actualisée

Mise à jour parce que j'ai remarqué qu'il s'agit d'une réponse active, cependant Flexbox serait l'approche correcte maintenant.

Démonstration en direct

Alignement vertical et horizontal.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Juste horizontal (tant que l'axe principal de flexion est horizontal, ce qui est le cas par défaut).

#wrapper {
  display: flex;
  justify-content: center;
}

Réponse originale utilisant une largeur fixe et pas de flexbox

Si le posteur original souhaite un alignement vertical et central, il est assez facile de fixer la largeur et la hauteur du bouton, essayez ce qui suit

Démonstration en direct

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

pour un alignement horizontal uniquement, utilisez soit

button{
    margin: 0 auto;
}

o

div{
    text-align:center;
}

135voto

RenatoSz Points 1159

Tu pourrais juste faire :

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

Ou vous pouvez le faire comme ceci à la place :

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

Le premier aligne au centre tout ce qui se trouve à l'intérieur de la division. L'autre alignera au centre uniquement le bouton.

37voto

Pat Points 14757

Et voilà :

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

Mise à jour : Si l'OP recherche un centre horizontal et vertical, cette réponse le fera pour un élément de largeur/hauteur fixe.

8voto

James Montagne Points 44517

Avec le peu de détails fournis, je vais supposer la situation la plus simple et dire que vous pouvez utiliser text-align: center :

http://jsfiddle.net/pMxty/

8voto

adeneo Points 135949

Margin : 0 auto ; est la réponse correcte pour un centrage horizontal uniquement. Pour un centrage dans les deux sens, quelque chose comme ceci fonctionnera, en utilisant jquery :

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Mise à jour ... cinq ans plus tard Si l'on utilise la fonction "flexbox" sur l'élément DIV parent, on peut facilement centrer le bouton à l'horizontale et à la verticale.

Incluant tous les préfixes de navigateur, pour une meilleure prise en charge

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X