komik.dk<\/a> de nous avoir aid\u00e9s \u00e0 cr\u00e9er ce guide.<\/p>\n\nUtilisez la proc\u00e9dure suivante pour centrer un bouton CSS.<\/p>\n\n
Centrer : Alignement du texte – Il suffit de modifier l’alignement du texte en le centrant \u00e0 partir de la propri\u00e9t\u00e9 de la balise div.<\/p>\n\n
margin : auto – En s\u00e9lectionnant l’option de marge automatique dans la fen\u00eatre des propri\u00e9t\u00e9s<\/p>\n\n
position : fixed – En d\u00e9finissant l’attribut de position comme \u00e9tant fixe<\/p>\n\n
display : flex – En rempla\u00e7ant l’attribut display par flex<\/p>\n\n
display : grid – Vous pouvez afficher la grille en s\u00e9lectionnant l’attribut d’affichage de la grille.<\/p>\n\n
1. En centrant l’attribut text-align de la balise body (text-align : center)<\/h3>\n\n
Dans cet exemple, nous utilisons l’attribut de centrage \u00ab\u00a0text-align\u00a0\u00bb de la balise \u00ab\u00a0body>\u00a0\u00bb, qui centre automatiquement tout ce qui se trouve \u00e0 l’int\u00e9rieur.<\/p>\n\n
2. En centrant l’attribut text-align de la balise div parent (text-align : center)<\/h3>\n\n
Dans l’exemple ci-dessous, nous utilisons la propri\u00e9t\u00e9 de centrage \u00ab\u00a0text-align\u00a0\u00bb sur un \u00e9l\u00e9ment div> avec la classe (button-container-div) pour nous assurer que tout ce qui est inclus dans ce div> est automatiquement centr\u00e9.<\/p>\n\n
3. En utilisant la propri\u00e9t\u00e9 margin auto, centrez le bouton CSS (Margin : auto)<\/h3>\n\n
Nous utilisons la propri\u00e9t\u00e9 auto ‘ Margin’. Margin centre automatiquement la div sur l’\u00e9cran. <\/p>\n\n
4. Utilisez un bouton CSS \u00e0 position fixe pour le centrer.<\/h3>\n\n
Dans cet exemple, nous d\u00e9finissons une marge de 50 % par rapport au c\u00f4t\u00e9 gauche de la page, puis nous utilisons position : fixed pour centrer le corps de la page.<\/p>\n\n
5. En sp\u00e9cifiant la propri\u00e9t\u00e9 flex pour la propri\u00e9t\u00e9 display (display : flex)<\/h3>\n\n
Dans cet exemple, nous appliquons la propri\u00e9t\u00e9 flex \u00ab\u00a0display\u00a0\u00bb, ainsi que les propri\u00e9t\u00e9s \u00ab\u00a0justify-content\u00a0\u00bb et \u00ab\u00a0align-items\u00a0\u00bb, \u00e0 la balise parent div> de classe (button-container-div). Le bouton contenu dans la balise div> sera centr\u00e9 \u00e0 la fois dans l’axe vertical et dans l’axe horizontal. <\/p>\n\n
Justify-content centre le bouton horizontalement.<\/p>\n\n
Le centre Align-items le maintient au milieu ; sinon, il commencera en haut de la div et descendra vers le bas.<\/p>\n\n
Comment centrer horizontalement un bouton en CSS<\/h2>\n\n
Cela peut \u00eatre un peu difficile, mais voici quelques techniques rapides pour centrer votre bouton, quel que soit le type d’\u00e9l\u00e9ment.<\/p>\n\n
Aligner les \u00e9l\u00e9ments au centre<\/h2>\n\n
Pour centrer horizontalement un \u00e9l\u00e9ment de bloc (tel que div>), utilisez margin : auto ;<\/p>\n\n
La d\u00e9finition de la largeur de l’\u00e9l\u00e9ment l’emp\u00eache de s’\u00e9tendre au-del\u00e0 des limites de son conteneur.<\/p>\n\n
L’\u00e9l\u00e9ment remplira alors la largeur requise, en laissant un espace \u00e9gal entre les deux marges :<\/p>\n\n
Cet \u00e9l\u00e9ment div a une position centrale.<\/p>\n\n
\u00c9l\u00e9ment de bouton avec un bloc en ligne<\/h2>\n\n
Par d\u00e9faut, les \u00e9l\u00e9ments bouton et lien sont d\u00e9finis sur display : inline-block. Vous enfermerez une partie avec un param\u00e8tre inline-block dans le flux habituel de gauche \u00e0 droite du document sur la page. <\/p>\n\n
Cela signifie que s’il y a suffisamment d’espace horizontal entre deux blocs inline, ils appara\u00eetront c\u00f4te \u00e0 c\u00f4te.<\/p>\n\n
Ceci est comparable aux \u00e9l\u00e9ments avec display : inline, sauf que les \u00e9l\u00e9ments inline-block peuvent avoir leur hauteur et leur largeur contr\u00f4l\u00e9es, mais pas les \u00e9l\u00e9ments inline.<\/p>\n\n
Utiliser text-align : center pour centrer le texte<\/h2>\n\n
En d\u00e9finissant text-align : center sur un \u00e9l\u00e9ment parent, vous pouvez centrer les \u00e9l\u00e9ments inline-block (et inline).<\/p>\n\n
Notre \u00e9l\u00e9ment button> est inclus dans un div> avec text-align : center.<\/p>\n\n
Avec une largeur fixe, il s’agit d’un \u00e9l\u00e9ment de bouton en bloc.<\/h2>\n\n
L’option Text-align : center ne peut pas \u00eatre utilis\u00e9e pour centrer les composants des blocs, car ils sont par d\u00e9faut de pleine largeur, \u00e0 moins qu’une largeur statique ne leur soit attribu\u00e9e.<\/p>\n\n
Si vous devez d\u00e9finir la largeur statique d’un bouton, vous pouvez utiliser cette technique pour centrer le bouton sur la page.<\/p>\n\n
Supposons que nous ayons un bouton de 200 px de large. M\u00eame s’il ne fait que 200 px de large, il ne permettra pas de placer d’autres \u00e9l\u00e9ments \u00e0 c\u00f4t\u00e9. <\/p>\n\n
Vous pouvez centrer un \u00e9l\u00e9ment de niveau bloc en r\u00e9glant les marges gauche et droite sur auto. Pour ce faire, vous pouvez utiliser l’abr\u00e9viation margin : 0 auto. (Cela annule \u00e9galement les marges sup\u00e9rieure et inf\u00e9rieure). <\/p>\n\n
Utiliser flexbox pour centrer<\/h2>\n\n
Vous pouvez \u00e9galement utiliser flexbox pour centrer les \u00e9l\u00e9ments inline-block et block.<\/p>\n\n
Enveloppez le bouton dans un div> parent et rendez-le visible : center flex et justify-content.<\/p>\n\n
Les param\u00e8tres flexbox permettent de centrer le bouton horizontalement et verticalement. Nous pouvons centrer l’\u00e9l\u00e9ment bouton horizontalement en utilisant la propri\u00e9t\u00e9 CSS align-items avec la valeur center. Parall\u00e8lement, nous pouvons utiliser la propri\u00e9t\u00e9 CSS justify-content en conjonction avec la valeur center pour centrer verticalement l’\u00e9l\u00e9ment bouton. <\/p>\n\n
Pour centrer un \u00e9l\u00e9ment de bouton horizontalement et verticalement, nous devons fournir les propri\u00e9t\u00e9s CSS justify-content et align-items en plus de la valeur center.<\/p>\n\n
Utilisation de la propri\u00e9t\u00e9 CSS transform<\/h2>\n\n
Outre la propri\u00e9t\u00e9 flexbox, nous pouvons \u00e9galement utiliser un ensemble de propri\u00e9t\u00e9s CSS pour centrer le bouton horizontalement et verticalement. Ajoutez des positions relatives et absolues \u00e0 la classe du conteneur et \u00e0 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 ). <\/p>\n\n
Deux boutons adjacents<\/h2>\n\n
Il peut arriver que vous souhaitiez que deux boutons soient adjacents l’un \u00e0 l’autre mais centr\u00e9s sur la page.<\/p>\n\n
Vous pouvez y parvenir en enveloppant les deux boutons dans un div> parent et en les centrant sur la page \u00e0 l’aide de flexbox.<\/p>\n\n
Nous avons notamment ajout\u00e9 margin-right : 20px au premier bouton pour les s\u00e9parer.<\/p>\n\n
Utiliser les mod\u00e8les CSS flexbox et grid pour centrer un bouton<\/h2>\n\n
En outre, vous pouvez centrer un bouton en changeant le mode d’affichage de l’\u00e9l\u00e9ment conteneur en flex ou grid et en lui ajoutant la propri\u00e9t\u00e9 justify-content : center.<\/p>\n\n
Par exemple, si vous utilisez un div> comme conteneur pour l’\u00e9l\u00e9ment button>, cette r\u00e8gle CSS centrera l’horizontale de l’\u00e9l\u00e9ment discontent > :<\/p>\n\n
.center-h {<\/p>\n\n
display : flex ; \/* ou display:grid *\/<\/p>\n\n
justify-content : center ;<\/p>\n\n
}<\/p>\n\n
L’avantage d’utiliser une architecture CSS de type flexbox ou grid est que vous pouvez centrer le contenu verticalement et horizontalement.<\/p>\n\n
R\u00e9flexions finales sur la fa\u00e7on de centrer horizontalement un bouton en CSS<\/h2>\n\n
Il s’agit des m\u00e9thodes CSS pour centrer un bouton horizontalement. Toutes ces strat\u00e9gies sont b\u00e9n\u00e9fiques en soi, en fonction de l’utilisation et de l’objectif vis\u00e9s. Toutefois, la meilleure technique consiste \u00e0 utiliser la propri\u00e9t\u00e9 Flex-box. L’autre m\u00e9thode est celle que vous jugez la plus appropri\u00e9e \u00e0 votre probl\u00e8me et \u00e0 votre situation. <\/p>\n\n
Lisez aussi notre guide sur : Comment centrer une vid\u00e9o en HTML !<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Gr\u00e2ce aux feuilles de style en cascade (CSS), vous pouvez donner \u00e0 une page web HTML la meilleure…","protected":false},"author":7829,"featured_media":4957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[468,485],"tags":[],"yoast_head":"\nComment centrer horizontalement un bouton en CSS - Outstanding Themes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment centrer horizontalement un bouton en CSS - Outstanding Themes\" \/>\n<meta property=\"og:description\" content=\"Gr\u00e2ce aux feuilles de style en cascade (CSS), vous pouvez donner \u00e0 une page web HTML la meilleure…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Outstanding Themes\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-22T21:23:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-21T14:22:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\" \/>\n\t<meta property=\"og:image:width\" content=\"917\" \/>\n\t<meta property=\"og:image:height\" content=\"454\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"outstandingthemes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"outstandingthemes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/\",\"url\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/\",\"name\":\"Comment centrer horizontalement un bouton en CSS - Outstanding Themes\",\"isPartOf\":{\"@id\":\"https:\/\/outstandingthemes.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\",\"datePublished\":\"2022-02-22T21:23:51+00:00\",\"dateModified\":\"2024-11-21T14:22:46+00:00\",\"author\":{\"@id\":\"https:\/\/outstandingthemes.com\/fr\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\"},\"breadcrumb\":{\"@id\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#primaryimage\",\"url\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\",\"contentUrl\":\"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png\",\"width\":917,\"height\":454},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/outstandingthemes.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment centrer horizontalement un bouton en CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/outstandingthemes.com\/fr\/#website\",\"url\":\"https:\/\/outstandingthemes.com\/fr\/\",\"name\":\"Outstanding Themes\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/outstandingthemes.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/outstandingthemes.com\/fr\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a\",\"name\":\"outstandingthemes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/outstandingthemes.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g\",\"caption\":\"outstandingthemes\"},\"url\":\"https:\/\/outstandingthemes.com\/fr\/author\/outstandingthemes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment centrer horizontalement un bouton en CSS - Outstanding Themes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment centrer horizontalement un bouton en CSS - Outstanding Themes","og_description":"Gr\u00e2ce aux feuilles de style en cascade (CSS), vous pouvez donner \u00e0 une page web HTML la meilleure…","og_url":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/","og_site_name":"Outstanding Themes","article_published_time":"2022-02-22T21:23:51+00:00","article_modified_time":"2024-11-21T14:22:46+00:00","og_image":[{"width":917,"height":454,"url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","type":"image\/png"}],"author":"outstandingthemes","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"outstandingthemes","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/","url":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/","name":"Comment centrer horizontalement un bouton en CSS - Outstanding Themes","isPartOf":{"@id":"https:\/\/outstandingthemes.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#primaryimage"},"image":{"@id":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","datePublished":"2022-02-22T21:23:51+00:00","dateModified":"2024-11-21T14:22:46+00:00","author":{"@id":"https:\/\/outstandingthemes.com\/fr\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a"},"breadcrumb":{"@id":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#primaryimage","url":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","contentUrl":"https:\/\/outstandingthemes.com\/wp-content\/uploads\/2022\/02\/buttoncenter.png","width":917,"height":454},{"@type":"BreadcrumbList","@id":"https:\/\/outstandingthemes.com\/fr\/comment-centrer-horizontalement-un-bouton-en-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/outstandingthemes.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment centrer horizontalement un bouton en CSS"}]},{"@type":"WebSite","@id":"https:\/\/outstandingthemes.com\/fr\/#website","url":"https:\/\/outstandingthemes.com\/fr\/","name":"Outstanding Themes","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/outstandingthemes.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/outstandingthemes.com\/fr\/#\/schema\/person\/b86ce9d8633057b23d4bc9ce7e1b341a","name":"outstandingthemes","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/outstandingthemes.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/794634315590831eaece4942d98a00a8?s=96&d=mm&r=g","caption":"outstandingthemes"},"url":"https:\/\/outstandingthemes.com\/fr\/author\/outstandingthemes\/"}]}},"_links":{"self":[{"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/posts\/5872"}],"collection":[{"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/users\/7829"}],"replies":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/comments?post=5872"}],"version-history":[{"count":1,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/posts\/5872\/revisions"}],"predecessor-version":[{"id":5873,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/posts\/5872\/revisions\/5873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/media\/4957"}],"wp:attachment":[{"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/media?parent=5872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/categories?post=5872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outstandingthemes.com\/fr\/wp-json\/wp\/v2\/tags?post=5872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}