j'essaie d'aligner le bouton html au centre de ma page

Question

j'essaie d'aligner le bouton html au centre de ma page

Demandé el 3 de Août, 2012: Quand la question a-t-elle été
990998 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'aligner un bouton HTML exactement au centre de la page, quel que soit le navigateur utilisé. Soit il flotte vers la gauche tout en restant au centre vertical, soit il se trouve quelque part sur la page, par exemple en haut de la page, etc.

Je veux qu'il soit centré à la fois verticalement et horizontalement. Voici ce que j'ai écrit pour l'instant :

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

Demandé el 3 de Août, 2012 par user1455116

Answer 1

4 Réponses

Answer 2

6voto

Maddy Points 65

Il y a plusieurs façons d'y remédier. PFB en est deux -

1ère Voie position d'utilisation : fixe - position : fixed ; positionne l'élément par rapport à la fenêtre d'affichage, ce qui signifie qu'il reste toujours au même endroit, même si la page défile. Si vous ajoutez les valeurs de gauche et de haut à 50 %, vous le placerez au milieu de l'écran.

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

2ème façon d'utiliser margin : auto -margin : 0 auto ; pour le centrage horizontal, mais margin : auto ; a refusé de fonctionner pour le centrage vertical jusqu'à maintenant ! Mais en fait, 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;
}

Répondu el 25 de Juillet, 2018 par Maddy (65 Points )

Answer 3

5voto

Roy Points 67

Pour moi, cela a fonctionné en utilisant flexbox.

Ajoutez une classe css autour du div / élément 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 où se trouve le milieu de la page ou de l'élément.

Répondu el 1 de Novembre, 2017 par Roy (67 Points )

Answer 4

1voto

Tim Withers Points 8091

Placez-le à l'intérieur d'un autre div, utilisez le 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

Répondu el 3 de Août, 2012 par Tim Withers (8091 Points )

Answer 5

0voto

Ritesh Kumar Points 91

Donnez à tous les éléments parents une largeur de 100 % et une hauteur de 100 %, puis utilisez la fonction affichage : table ; y display:table-cell ; Vérifiez l'échantillon de travail.

Version de travail de 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>

Répondu el 11 de Février, 2019 par Ritesh Kumar (91 Points )

j'essaie d'aligner le bouton html au centre de ma page

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

j'essaie d'aligner le bouton html au centre de ma page

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: