Maison >interface Web >tutoriel CSS >Comment puis-je centrer un bouton dans une division ?

Comment puis-je centrer un bouton dans une division ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-22 10:35:46183parcourir

How Can I Center a Button Within a Div?

Création de boutons centrés dans un div

Le centrage d'un bouton dans un div peut être réalisé par différentes méthodes. Pour un div avec une largeur de 100 %, voici comment y parvenir :

Utiliser Flexbox (réponse mise à jour)

Flexbox offre une approche moderne et flexible :

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

Cela aligne le bouton au centre à la fois verticalement et horizontalement.

Utilisation d'une largeur et d'un positionnement fixes (réponse originale)

Si le bouton a une largeur et une hauteur fixes, vous pouvez utiliser un positionnement relatif et des marges négatives :

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

Alternativement, pour l'alignement horizontal uniquement, utilisez margin : 0 auto ; ou définissez text-align: center; sur le div.

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:
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