Maison > interface Web > tutoriel CSS > Comment centrer un bouton horizontalement (et verticalement) dans une division pleine largeur ?

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

Mary-Kate Olsen
Libérer: 2024-12-16 17:53:09
original
945 Les gens l'ont consulté

How to Center a Button Horizontally (and Vertically) Within a Full-Width Div?

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 */
}
Copier après la connexion

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 */
}
Copier après la connexion

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 */
}
Copier après la connexion

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 */
}
Copier après la connexion

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!

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