web-dev-qa-db-fra.com

Comment centrer un bouton dans une div?

J'ai un div dont la largeur est de 100%.

Je voudrais centrer un bouton, comment pourrais-je faire cela?

<div style="width:100%; height:100%">
     <button type="button">hello</button>
</div>
htmlcsscentering
183
foreyez

Réponse mise à jour

Mettre à jour parce que j'ai remarqué que c'était une réponse active, cependant Flexbox serait la bonne approche maintenant.

démonstration en direct

Alignement vertical et horizontal.

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

Juste horizontal (tant que l'axe de flexion principal est horizontal ce qui est la valeur par défaut)

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

Réponse originale utilisant une largeur fixe et aucune boîte souple

Si l’affiche originale veut un alignement vertical et central, c’est assez facile avec une largeur et une hauteur fixes 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

button{
    margin: 0 auto;
}

ou

div{
    text-align:center;
}
295
Loktar

vous pourriez juste faire

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

Ou tu pourrais faire comme ça

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

Le premier centre alignera tout dans la division. L'autre centre alignera juste le bouton.

98
RenatoSz

et voilà:

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

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

19
Pat

Marge: 0 auto; est la bonne réponse pour le centrage horizontal uniquement. Pour centrer les deux manières, 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 , on pourrait utiliser flexbox sur l'élément DIV parent pour facilement centrer le bouton horizontalement et verticalement.

Y compris tous les préfixes du navigateur, pour un meilleur support

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>
9
adeneo

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

http://jsfiddle.net/pMxty/

6
James Montagne

Utiliser la flexbox

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Et puis ajouter la classe à votre bouton.

<button class="Center">Demo</button>
6
yask

Vous devriez le prendre simple ici vous allez:

vous avez d'abord la position initiale de votre texte ou bouton: 

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

En ajoutant cette ligne de code CSS à la balise h2 ou à la balise div que contient le bouton étiquette

style: "text-align: center;"

Finaly Le code de résultat sera: 

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

enter image description here

4
nadir hamidou

Je suis passé par là et je pensais quitter la solution que j'avais également utilisée, qui utilise line-height et text-align: center pour effectuer un centrage vertical et horizontal:

Cliquez ici pour utiliser JSFiddle

2
lhan

La réponse la plus simple qui puisse s’appliquer à la plupart des cas est de définir la marge sur 0 auto et de régler l’affichage sur block. Vous pouvez voir comment j'ai centré mon bouton dans ma démo sur CodePen

enter image description here

2
JGallardo

Pour centrer un <button type = "button"> à la fois verticalement et horizontalement dans un <div> dont la largeur est calculée dynamiquement, comme dans votre cas, procédez comme suit:

  1. Réglez text-align: center; sur le retour à la ligne <div>: cela centrera le bouton chaque fois que vous redimensionnerez le <div> (ou plutôt la fenêtre)

  2. Pour l'alignement vertical, vous devrez définir margin: valuepx; pour le bouton. Voici la règle pour calculer valuepx:

    valuepx = (wrappingDIVheight - buttonHeight)/2

Voici une démonstration de JS Bin .

2
Billal Begueradj

Si div est #div et que le bouton est #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Puis emboîtez le bouton dans div comme d’habitude.

1
Victor Nițu

Option CSS réactive pour centrer un bouton verticalement et horizontalement sans se préoccuper de la taille de l'élément parent (en utilisant des crochets d'attributs de données pour des raisons de clarté et de séparation) :

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Violon: https://jsfiddle.net/crrollyson/zebo1z8f/

1
CR Rollyson

Le plus simple est de le saisir en tant que "div", de lui attribuer une "marge: 0 auto", mais si vous souhaitez le centrer, vous devez lui donner une largeur.

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }
1
Ashhad Sameer

Manière réactive de centrer votre bouton dans un div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>
0
Maijied Hasan Shuvo