Maison > interface Web > tutoriel CSS > Comment puis-je centrer un bouton à l'intérieur d'un Div ?

Comment puis-je centrer un bouton à l'intérieur d'un Div ?

Mary-Kate Olsen
Libérer: 2024-12-25 20:05:09
original
204 Les gens l'ont consulté

How Can I Center a Button Inside a Div?

Centrer un bouton dans un div

Dans le développement Web, il est souvent souhaitable de centrer un bouton dans un div contenant. Explorons deux solutions à ce défi :

Utiliser Flexbox

Flexbox fournit une solution élégante pour aligner les éléments le long des deux axes. Pour centrer un bouton horizontalement et verticalement au sein d'un div :

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
Copier après la connexion

Si seul le centrage horizontal est souhaité, la propriété justifier-content peut être utilisée :

#wrapper {
  display: flex;
  justify-content: center;
}
Copier après la connexion

Margin- Approche basée

Sans flexbox, un bouton peut être centré en utilisant margins :

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}
Copier après la connexion

Pour le centrage horizontal uniquement, l'une de ces deux approches peut être utilisée :

  • margin : 0 auto ; sur le bouton
  • text-align: center; sur le div contenant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal