diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/layout_cookbook/center_an_element | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/layout_cookbook/center_an_element')
-rw-r--r-- | files/fr/web/css/layout_cookbook/center_an_element/index.md | 48 |
1 files changed, 22 insertions, 26 deletions
diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.md b/files/fr/web/css/layout_cookbook/center_an_element/index.md index 713d277510..13c7c36aa0 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.md +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.md @@ -11,48 +11,44 @@ tags: translation_of: Web/CSS/Layout_cookbook/Center_an_element original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p> +Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_. -<p><img alt="an element centered inside a larger box" src="cookbook-center.png"></p> + -<h2 id="Spécifications_sommaires">Spécifications sommaires</h2> +## Spécifications sommaires -<p>Centrer un élément à la fois horizontalement et verticalement dans un autre élément.</p> +Centrer un élément à la fois horizontalement et verticalement dans un autre élément. -<h2 id="Recette">Recette</h2> +## Recette -<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p> +{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}} -<div class="note"> -<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p> -</div> +> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html) -<h2 id="Choix_effectués">Choix effectués</h2> +## Choix effectués -<p>Pour centrer une boîte dans une autre, on a donné au contenant une propriété <code>display: flex</code>.</p> +Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`. -<p>Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur <code>center</code> pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur <code>center</code> pour centrer horizontalement.</p> +Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. -<p>À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.<br> - Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.</p> +À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. +Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.</p> +Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété. -<h3 id="align-items"><code>align-items</code></h3> +### `align-items` -<p>{{Compat("css.properties.align-items")}}</p> +{{Compat("css.properties.align-items")}} -<h3 id="justify-content"><code>justify-content</code></h3> +### `justify-content` -<p>{{Compat("css.properties.justify-content")}}</p> +{{Compat("css.properties.justify-content")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li> -</ul> +- [L'alignement des boîtes avec Flexbox](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [CSS Box alignment guide](/fr/docs/Web/CSS/CSS_Box_Alignment) |