en essayant d’aligner le bouton html au centre de ma page

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

Je veux qu’il soit centré verticalement et horizontalement. Voici ce que j’ai écrit en ce moment:

Voici votre solution: http://jsfiddle.net/7Laf8/

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

Avec les styles suivants:

 .wrapper { text-align: center; } .button { position: absolute; top: 50%; }

Il y a plusieurs façons de peler un chat, et ce n’est qu’un.

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

Par exemple:

HTML

CSS

 button{ margin:auto; display:block; }

VOIR EN ACTION: http://codepen.io/maudulus/pen/avBdpL

J’ai vraiment pris récemment pour display: table pour donner aux choses une taille fixe permettant par exemple de créer une margin: 0 auto pour fonctionner. A beaucoup facilité ma vie Il suffit de dépasser le fait que l’affichage de la table ne signifie pas la table html.

C’est particulièrement utile pour un design réactif où les choses deviennent juste poilues et folles. 50% ont laissé ceci et -50% qui deviennent tout simplement ingérables.

 style { display: table; margin: 0 auto }

http://jsfiddle.net/Z52eR/

De plus, si vous avez deux boutons et que vous souhaitez qu’ils aient la même largeur, vous n’avez même pas besoin de connaître la taille de chacun pour obtenir la même largeur, car la table les réduira comme par magie pour vous.

entrer la description de l'image ici

http://jsfiddle.net/AK674/2/

(Cela fonctionne aussi s’ils sont en ligne et que vous voulez centrer deux boutons d’un côté à l’autre – essayez de le faire avec des pourcentages!).

Essayez ceci c’est assez simple et vous ne pouvez pas apporter de modifications à votre fichier .css cela devrait fonctionner

Voici la solution comme demandé

Pour moi, cela a fonctionné en utilisant la flexbox.

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

 .parent { display: flex; }

et pour le bouton utiliser:

 .button { justify-content: center; }

Vous devriez utiliser un div parent, sinon le bouton «ne sait pas» quel est le milieu de la page / de l’élément.

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

Voici un exemple: http://jsfiddle.net/U2B3x/

Il existe plusieurs façons de résoudre le même problème. PFB deux d’entre eux –

1ère voie en utilisant la position: fixe – position: fixe; positions par rapport à la fenêtre d’affichage, ce qui signifie qu’il rest toujours au même endroit même si la page est défilée. Ajouter la valeur gauche et la valeur supérieure à 50% le placera au milieu de l’écran.

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

2ème voie en utilisant la marge: auto- margin: 0 auto; pour le centrage horizontal, mais marge: auto; a refusé de travailler pour le centrage vertical… jusqu’à maintenant! 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; }