Comment puis-je centrer un bouton horizontalement et verticalement dans une division pleine largeur ?

Un guide complet sur le centrage des boutons dans les éléments Div

Dans le domaine de la conception Web, la tâche de positionnement précis des éléments revêt une importance primordiale. Centrer un bouton dans un div, par exemple, peut améliorer considérablement l'attrait visuel et l'expérience utilisateur de votre site Web.

Question :

Pour obtenir l'alignement souhaité, le Web les développeurs rencontrent souvent la question suivante :

Comment puis-je centrer un bouton dans un div qui s'étend sur toute la largeur (_100%_) de son conteneur parent ?

Réponse :

Approche moderne : tirer parti de Flexbox

Les navigateurs modernes vantent la puissance de Flexbox , un module CSS conçu pour des mises en page flexibles. Flexbox permet un alignement précis des éléments le long des axes horizontal et vertical, ce qui en fait une solution idéale pour centrer les boutons.

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

Approche héritée : utilisation du positionnement et de la marge

Dans les navigateurs qui ne prennent pas entièrement en charge Flexbox ou lorsque des dimensions fixes sont requises, une méthode alternative consiste à utiliser le positionnement et margins.

button {
  height: 20px;
  width: 100px;
  margin: -20px -50px;
  position: relative;
  top: 50%;
  left: 50%;
}

Options supplémentaires

Pour le centrage horizontal uniquement, tenez compte des propriétés CSS suivantes :

• margin : 0 auto ;
• text-align : centre ; appliqué au div parent

Conclusion :

Le centrage des boutons dans les divs est devenu une tâche simple grâce à l'avènement de Flexbox et des techniques d'alignement héritées. Choisissez l'approche qui correspond le mieux à la prise en charge spécifique de votre navigateur et aux exigences de mise en page, en vous assurant que vos boutons sont non seulement fonctionnels mais également esthétiques.

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!