web-dev-qa-db-fra.com

essayant d'aligner le bouton html au centre de la page ma

J'essaie d'aligner un bouton HTML exactement au centre de la page, quel que soit le navigateur utilisé. Il flotte soit à gauche tout en restant au centre vertical, soit quelque part sur la page comme en haut de la page, etc. 

Je veux que ce soit à la fois verticalement et horizontalement. Voici ce que j'ai écrit maintenant:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>
htmlbuttonvertical-alignmentalignment
76
user1455116

Voici votre solution: JsFiddle

Fondamentalement, placez votre bouton dans une div avec un texte centré:

<div class="wrapper">
    <button class="button">Button</button>
</div>

Avec les styles suivants:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

Il existe de nombreuses façons de peler un chat, et ce n’est qu’un exemple.

117
Mohamad

Vous pouvez centrer un bouton sans utiliser text-align sur le parent div simplement en utilisant margin:auto; display:block; 

Par exemple:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button{
  margin:auto;
  display:block;
}

LE VOIR EN ACTION:CodePen

47
maudulus

J'ai récemment pris display: table pour donner aux objets une taille fixe, permettant par exemple à margin: 0 auto de fonctionner. A rendu ma vie beaucoup plus facile. Il vous suffit de dépasser le fait que l'affichage 'table' ne signifie pas table html.

C'est particulièrement utile pour un design réactif où les choses deviennent tout simplement poilues et folles, 50% restant et -50% devenant ingérables.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

De plus, si vous avez deux boutons et que vous les voulez de la même largeur, vous n'avez même pas besoin de connaître la taille de chacun d'eux pour qu'ils aient la même largeur - car le tableau les réduira comme par magie pour vous. 

enter image description here

JsFiddle

(Cela fonctionne aussi s'ils sont en ligne et que vous voulez centrer deux boutons côte à côte - essayez de le faire avec des pourcentages!).

15
Simon_Weaver

essayez ceci, il est assez simple et ne vous permet pas d’apporter des modifications à votre fichier .css, cela devrait fonctionner

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>
4
Rick Roy

Voici la solution demandée 

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

4
joy oares

Pour moi, cela fonctionnait avec flexbox. 

Ajoutez une classe CSS autour du div/element parent avec:

.parent {
    display: flex;
}

et pour l'utilisation du bouton:

.button {
    justify-content: center;
}

Vous devez utiliser un div parent, sinon le bouton "ne sait pas" ce que le milieu de la page/élément est. 

2
Roy

Il y a plusieurs façons de résoudre le même problème. PFB deux d'entre eux - 

1ère voie en utilisant position: fixe - position: fixe; positions par rapport à la fenêtre, ce qui signifie qu’elle reste toujours au même endroit même si la page est défilée L'ajout des valeurs left et top à 50% le placera au milieu de l'écran.

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

2nd Way utilisant margin: auto -margin: 0 auto; pour centrage horizontal, mais marge: auto; a refusé de travailler pour le centrage vertical… jusqu'à présent! Mais en réalité, le centrage absolu ne nécessite qu'une hauteur déclarée et ces styles:

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
1
Maddy

Placez-le dans un autre div, utilisez CSS pour déplacer le bouton au milieu:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;">
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname</button> 
</div>​

Voici un exemple: JsFiddle

1
Tim Withers

Créez tous les éléments parents avec 100% largeur et 100% hauteur et utilisez display: table; et display: table-cellule;, vérifiez l'échantillon de travail.

Version de travail Git

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>
0
Ritesh Kumar