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
Libérer: 2024-12-22 10:35:46
original
218 Les gens l'ont consulté

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

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%;
}
Copier après la connexion

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