Grâce aux feuilles de style en cascade (CSS), vous pouvez donner à une page web HTML la meilleure apparence possible. Chaque élément d’une page peut être arrangé comme vous le souhaitez à l’aide des feuilles de style en cascade. Vous pouvez utiliser des éléments alignés horizontalement et verticalement. Les boutons CSS doivent être centrés s’ils doivent être placés au centre d’une page web ou à l’intérieur d’une div.
Avant de poursuivre, nous tenons à remercier komik.dk de nous avoir aidés à créer ce guide.
Utilisez la procédure suivante pour centrer un bouton CSS.
Centrer : Alignement du texte – Il suffit de modifier l’alignement du texte en le centrant à partir de la propriété de la balise div.
margin : auto – En sélectionnant l’option de marge automatique dans la fenêtre des propriétés
position : fixed – En définissant l’attribut de position comme étant fixe
display : flex – En remplaçant l’attribut display par flex
display : grid – Vous pouvez afficher la grille en sélectionnant l’attribut d’affichage de la grille.
1. En centrant l’attribut text-align de la balise body (text-align : center)
Dans cet exemple, nous utilisons l’attribut de centrage « text-align » de la balise « body> », qui centre automatiquement tout ce qui se trouve à l’intérieur.
2. En centrant l’attribut text-align de la balise div parent (text-align : center)
Dans l’exemple ci-dessous, nous utilisons la propriété de centrage « text-align » sur un élément div> avec la classe (button-container-div) pour nous assurer que tout ce qui est inclus dans ce div> est automatiquement centré.
3. En utilisant la propriété margin auto, centrez le bouton CSS (Margin : auto)
Nous utilisons la propriété auto ‘ Margin’. Margin centre automatiquement la div sur l’écran.
4. Utilisez un bouton CSS à position fixe pour le centrer.
Dans cet exemple, nous définissons une marge de 50 % par rapport au côté gauche de la page, puis nous utilisons position : fixed pour centrer le corps de la page.
5. En spécifiant la propriété flex pour la propriété display (display : flex)
Dans cet exemple, nous appliquons la propriété flex « display », ainsi que les propriétés « justify-content » et « align-items », à la balise parent div> de classe (button-container-div). Le bouton contenu dans la balise div> sera centré à la fois dans l’axe vertical et dans l’axe horizontal.
Justify-content centre le bouton horizontalement.
Le centre Align-items le maintient au milieu ; sinon, il commencera en haut de la div et descendra vers le bas.
Comment centrer horizontalement un bouton en CSS
Cela peut être un peu difficile, mais voici quelques techniques rapides pour centrer votre bouton, quel que soit le type d’élément.
Aligner les éléments au centre
Pour centrer horizontalement un élément de bloc (tel que div>), utilisez margin : auto ;
La définition de la largeur de l’élément l’empêche de s’étendre au-delà des limites de son conteneur.
L’élément remplira alors la largeur requise, en laissant un espace égal entre les deux marges :
Cet élément div a une position centrale.
Élément de bouton avec un bloc en ligne
Par défaut, les éléments bouton et lien sont définis sur display : inline-block. Vous enfermerez une partie avec un paramètre inline-block dans le flux habituel de gauche à droite du document sur la page.
Cela signifie que s’il y a suffisamment d’espace horizontal entre deux blocs inline, ils apparaîtront côte à côte.
Ceci est comparable aux éléments avec display : inline, sauf que les éléments inline-block peuvent avoir leur hauteur et leur largeur contrôlées, mais pas les éléments inline.
Utiliser text-align : center pour centrer le texte
En définissant text-align : center sur un élément parent, vous pouvez centrer les éléments inline-block (et inline).
Notre élément button> est inclus dans un div> avec text-align : center.
Avec une largeur fixe, il s’agit d’un élément de bouton en bloc.
L’option Text-align : center ne peut pas être utilisée pour centrer les composants des blocs, car ils sont par défaut de pleine largeur, à moins qu’une largeur statique ne leur soit attribuée.
Si vous devez définir la largeur statique d’un bouton, vous pouvez utiliser cette technique pour centrer le bouton sur la page.
Supposons que nous ayons un bouton de 200 px de large. Même s’il ne fait que 200 px de large, il ne permettra pas de placer d’autres éléments à côté.
Vous pouvez centrer un élément de niveau bloc en réglant les marges gauche et droite sur auto. Pour ce faire, vous pouvez utiliser l’abréviation margin : 0 auto. (Cela annule également les marges supérieure et inférieure).
Utiliser flexbox pour centrer
Vous pouvez également utiliser flexbox pour centrer les éléments inline-block et block.
Enveloppez le bouton dans un div> parent et rendez-le visible : center flex et justify-content.
Les paramètres flexbox permettent de centrer le bouton horizontalement et verticalement. Nous pouvons centrer l’élément bouton horizontalement en utilisant la propriété CSS align-items avec la valeur center. Parallèlement, nous pouvons utiliser la propriété CSS justify-content en conjonction avec la valeur center pour centrer verticalement l’élément bouton.
Pour centrer un élément de bouton horizontalement et verticalement, nous devons fournir les propriétés CSS justify-content et align-items en plus de la valeur center.
Utilisation de la propriété CSS transform
Outre la propriété flexbox, nous pouvons également utiliser un ensemble de propriétés CSS pour centrer le bouton horizontalement et verticalement. Ajoutez des positions relatives et absolues à la classe du conteneur et à la classe contenant le bouton. Maintenant, en utilisant left:50% et top:50%, centrez le bouton dans le conteneur. En outre, utilisez transform : translate (-50 pour cent ,-50 pour cent ).
Deux boutons adjacents
Il peut arriver que vous souhaitiez que deux boutons soient adjacents l’un à l’autre mais centrés sur la page.
Vous pouvez y parvenir en enveloppant les deux boutons dans un div> parent et en les centrant sur la page à l’aide de flexbox.
Nous avons notamment ajouté margin-right : 20px au premier bouton pour les séparer.
Utiliser les modèles CSS flexbox et grid pour centrer un bouton
En outre, vous pouvez centrer un bouton en changeant le mode d’affichage de l’élément conteneur en flex ou grid et en lui ajoutant la propriété justify-content : center.
Par exemple, si vous utilisez un div> comme conteneur pour l’élément button>, cette règle CSS centrera l’horizontale de l’élément discontent > :
.center-h {
display : flex ; /* ou display:grid */
justify-content : center ;
}
L’avantage d’utiliser une architecture CSS de type flexbox ou grid est que vous pouvez centrer le contenu verticalement et horizontalement.
Réflexions finales sur la façon de centrer horizontalement un bouton en CSS
Il s’agit des méthodes CSS pour centrer un bouton horizontalement. Toutes ces stratégies sont bénéfiques en soi, en fonction de l’utilisation et de l’objectif visés. Toutefois, la meilleure technique consiste à utiliser la propriété Flex-box. L’autre méthode est celle que vous jugez la plus appropriée à votre problème et à votre situation.
Lisez aussi notre guide sur : Comment centrer une vidéo en HTML !
