Comment puis-je centrer un bouton à l'intérieur d'un 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;
}

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

#wrapper {
  display: flex;
  justify-content: center;
}

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%;
}

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!