Comment centrer un bouton horizontalement (et verticalement) dans une division pleine largeur ?

Centrer un bouton dans un div avec une largeur de 100 %

Un besoin courant en CSS est de centrer un bouton dans un div qui s'étend sur l'ensemble largeur de la page. Pour y parvenir, plusieurs méthodes sont disponibles.

Une approche consiste à utiliser Flexbox. En définissant la propriété display du div sur flex et en ajoutant justifier-content: center et align-items: center, le div devient un conteneur flexbox qui centre ses enfants verticalement et horizontalement.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

En cas d'alignement vertical n'est pas nécessaire, vous pouvez simplement utiliser justifier-content: center.

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

Pour une approche plus traditionnelle, vous pouvez définir la propriété margin du bouton sur auto. Cela centrera le bouton horizontalement dans le div.

button {
  margin: 0 auto;
  /* Other styles */
}

Vous pouvez également définir la propriété text-align du div au centre. Cela centrera tous les éléments du div, y compris le bouton.

div {
  text-align: center;
}
button {
  /* Other styles */
}

Ce ne sont là que quelques méthodes pour centrer un bouton dans un div. La meilleure approche dépendra des exigences spécifiques de votre aménagement.

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!