From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../layout_cookbook/centrer_un_element/index.html | 59 ---------------------- 1 file changed, 59 deletions(-) delete mode 100644 files/fr/web/css/layout_cookbook/centrer_un_element/index.html (limited to 'files/fr/web/css/layout_cookbook/centrer_un_element/index.html') diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html deleted file mode 100644 index c4d1fb52c3..0000000000 --- a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Centrer un élément -slug: Web/CSS/Layout_cookbook/Centrer_un_element -tags: - - Alignement - - CSS - - Layout - - centrer - - flexbox - - recettes -translation_of: Web/CSS/Layout_cookbook/Center_an_element ---- -
{{CSSRef}}
- -

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.

- -

an element centered inside a larger box

- -

Spécifications sommaires

- -

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

Choix effectués

- -

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

- -

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.

- -

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

- -

Compatibilité des navigateurs

- -

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

- - - -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

justify-content

- -

{{Compat("css.properties.justify-content")}}

- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf