aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/layout_cookbook/center_an_element
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/layout_cookbook/center_an_element
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-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.md48
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>
+![an element centered inside a larger box](cookbook-center.png)
-<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)