Comment faire pour centrer un bouton à l'intérieur d'un div?
J'ai un div qui est la largeur est de 100%.
J'aimerais centre un bouton, comment pourrais-je faire cela?
<div style="width:100%; height:100%">
<button type="button">hello</button>
</div>
- quel est le code que vous utilisez pour le bouton?
- Je suppose qu'il veut à la fois verticale et horizontale de centrage. Aucune des solutions de mesure d'accomplir cela. CSS n'est pas très bon à la verticale de centrage =(.
- laissez-moi juste dire que flexbox rend cette réponse inutile pour 2014. yeah baby!
- double possible de cherchant à aligner html bouton au centre de la page ma page
Vous devez vous connecter pour publier un commentaire.
Mise À Jour De Réponse
Mise à jour parce que j'ai remarqué c'est une réponse active, cependant Flexbox le plus approprié maintenant.
Démonstration En Direct
D'alignement Vertical et horizontal.
Horizontale (tant que la principale flex axe est horizontal qui est par défaut)
Réponse originale à cette question à l'aide d'une largeur fixe et pas de flexbox
Si l'affiche originale veut verticale et le centre de l'alignement, il est assez facile pour fixe la largeur et la hauteur du bouton, essayez les solutions suivantes
Démonstration En Direct
CSS
juste pour l'alignement horizontal utiliser
ou
vous pourriez juste faire
Ou l'unité d'organisation peut faire comme ceci
Le premier centre d'aligner tout à l'intérieur de la div. L'autre centre d'aligner simplement le bouton.
et le tour est joué:
Mise à jour: Si l'OP est à la recherche d'horizontale et de verticale-centre, cette réponse va le faire pour un fixe largeur/hauteur de l'élément.
Margin: 0 auto; est la bonne réponse pour le centrage horizontal uniquement.
Pour le centrage des deux manières quelque chose de ce genre de travail, à l'aide de jquery:
Mise à jour ... cinq ans plus tard, on pourrait utiliser flexbox sur l'élément DIV parent facilement le centre de la touche à la fois horizontalement et verticalement.
Y compris tous les préfixes de navigateur, pour un meilleur soutien
CSS:
HTML:
Avec le peu de détails fournis, je vais considérer la situation la plus simple et dire que vous pouvez utiliser
text-align: center
:http://jsfiddle.net/pMxty/
À l'aide de flexbox
Et puis l'ajout de la classe de votre bouton.
Vous devriez le prendre simple ici, vous allez :
d'abord, vous avez la position initiale de votre texte ou bouton :
En ajoutant ce code css ligne à la h2 tag ou à la div balise détient le bouton de la balise
Enfin Le code de résultat sera :
Est venu à travers ce et j'ai pensé laisser la solution que j'ai utilisée aussi bien, qui utilise
line-height
ettext-align: center
à faire à la fois verticale et horizontale de centrage:Cliquez ici pour travailler JSFiddle
À un centre de
<button type = "button">
à la fois verticalement et horizontalement dans une<div>
dont la largeur est calculée dynamiquement comme dans votre cas, c'est ce à faire:text-align: center;
pour l'emballage<div>
: ce sera le centre de la touche lorsque vous redimensionnez la<div>
(ou plutôt de la fenêtre)Pour l'alignement vertical, vous aurez besoin de mettre
margin: valuepx;
pour le bouton. C'est la règle sur la façon de calculervaluepx
:valuepx = (wrappingDIVheight - buttonHeight)/2
Ici est un JS Bin démo.
Super simple réponse qui s'applique à la plupart des cas, est tout juste à définir la marge de
0 auto
et régler l'affichageblock
. Vous pouvez voir comment j'ai centré mon bouton dans ma démo sur CodePenChose la plus facile est entrée comme un "div" donner "margin:0 auto" mais si vous voulez qu'elle soit centrée u besoin de lui donner une largeur
Responsive CSS pour centrer un bouton à la verticale et à l'horizontale, sans se préoccuper de la taille de l'élément parent (à l'aide de l'attribut de données crochets pour plus de clarté et de séparation des préoccupations):
HTML
CSS
Violon: https://jsfiddle.net/crrollyson/zebo1z8f/
Supposant div #div et bouton bouton#:
Alors nest le bouton dans la div comme d'habitude.
Réactive de façon à centrer votre bouton dans un div: