Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Comment créer un texte parfaitement centré avec Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Il n’y a rien de particulièrement impressionnant sur le fait de centrer horizontalement votre contenu ; vous le faites depuis des années. Mais qu’en est-il du centrage vertical de votre contenu à hauteur variable ? Dans cette vidéo de mon course, 6 Flexbox Projects for Web Designers, vous apprendrez comment Flexbox gère ce problème avec un minimum d’effort.

Comment créer un contenu parfaitement centré avec Flexbox

Présentation du projet dans CodePen

Dans ce tutoriel, je vais juste vous montrer à quel point il est facile d'utiliser le modèle Flexbox pour centrer horizontalement et verticalement n’importe quel élément de contenu que vous voulez centrer.

Commencez par aller sur le pen de départ de ce projet sur CodePen, puis cliquez sur la Fork pour ouvrir une nouvelle copie. Nous allons faire nos changements sur cette nouvelle copie.

Regardons tout d’abord le code HTML.

Flexbox starting HTML

Donc ce que nous avons ici est une bannière, et tout cela est contenu dans une div avec une classe de banner. A l’intérieur de cela nous avons une autre div avec une classe de banner-text. Et puis nous avons un élément h1, h3 et h6 qui contient l’ensemble de notre texte. Donc tous ces trois éléments de texte contenus dans cette div qui a une classe de banner-text.

Puis à l’intérieur de notre CSS, nous avons mis en place la bannière.

Starting CSS

Si on descend vers la classe banner, nous avons configuré notre couleur de texte en blanc. Nous avons créé une image d’arrière-plan. Nous l'avons positionné, et dimensionné, et réglé sa hauteur à 300 pixels. Et nous avons appliqué des styles aux trois éléments de texte qui sont à l’intérieur de notre bannière, notre h1, h3 et h6.

Nous avons mis les marges à zéro alors qu’ils sont agréable et confortable juste à côté de l’autre, et nous avons établi une ombre de texte derrière ce texte. Et puis il y a d'autres règles comme vous pourrez le voir.

L’ancienne méthode de centrage de texte

Ce que je veux vous montrer à ce stade est la façon dont ont a souvent procédé pour verticalement et horizontalement aligner notre texte.

L’alignement horizontal du notre texte est très facile à faire. Donc nous pourrions simplement aller dans la règle pour nos trois titres, h1, h3 et h6, à l’intérieur de notre bannière et il suffit de mettre le text-align à center.

La partie la plus difficile est de centrer verticalement notre texte.

Si vous avez juste une ligne de texte, vous pouvez facilement le centrer verticalement en réglant la hauteur de ligne à la même hauteur que le conteneur. Notre container est donc la bannière elle-même qui fait 300 pixels de haut, donc si nous n’avions qu’une seule ligne de texte nous pourrions définir la hauteur de notre ligne à 300 pixels et le texte devrait être centré verticalement.

Mais que se passe-t-il si vous avez plusieurs lignes de texte ? Que se passe-t-il si vous avez un paragraphe de texte ? Que se passe-t-il si vous avez un mélange de texte et d’images, et vous voulez qu'un bloc entier de contenu soit centré verticalement ?

Eh bien, la façon dont j’avais l’habitude de le faire était juste de le mesurer d'un coup d'oeil. Donc je créerais une nouvelle règle pour .banner-text et jouerais avec elle un petit peu, augmentant la marge intérieure supérieure de diverses valeurs différentes jusqu'à ce qu’elle ait l'air bien.

Mais la manière traditionnelle n’est pas toujours fiable car que se passe-t-il si quelqu'un substitue vos tailles de texte au point où il n’est plus centré ? Vous n’avez pas un contrôle total sur lui de cette manière.

Centrer le texte avec Flexbox

Flexbox permet de centrer verticalement notre texte beaucoup plus facilement et plus précisément que la manière traditionnelle.

Lorsque nous utilisons le modèle Flexbox, nous n'avons même pas besoin d’une règle pour la classe banner-text. Tout ce que nous devons faire est que nous devons traiter avec le conteneur flex, qui va être notre classe banner.

La classe banner représente la balise div qui est le parent de ce texte. Nous allons donc à l’intérieur de la règle pour la classe .banner, pour définir notre display à flex.

Puis à l’intérieur de notre règle banner, après affichage : flex, nous allons faire quelque chose de plus. Nous allons ajouter justify-content: center, qui est la façon dont nous allons tout centrer horizontalement.

Et puis la dernière chose que nous devons faire est de déterminer comment centrer verticalement les choses.

Donc nous pouvons aligner les objets le long de l’axe principal à l’aide de justify-content. Mais nous pouvons aligner des objets le long de l’axe transversal à l’aide d’une autre propriété appelée align-items.

Si nous l’avons paramétré flex-start, le texte apparaît en haut. Si nous avons changé pour flex-end, il serait en bas. Nous avons également accès à la même valeur de centre, qui sera centrera verticalement notre texte.

Cette propriété align-items est donc exactement la même chose que la propriété justify-content, mais ça va le long de l’axe transversal au lieu de l’axe principal. Lorsque nous créons un conteneur flex à l’aide display: flex, par défaut il est sur une ligne au lieu d’une colonne, afin que le but de notre axe principal soit notre axe horizontal. Alors justify-content va aller sur notre axe horizontal, et la propriété align-items va le long de l’axe transversal, ce qui est, dans ce cas, l’axe vertical.

Voici ce à quoi ça ressemble en fin de compte :

Vous pouvez trouver tout le code pour l’effet fini sur CodePen.

Regardez le cours complet

Le modèle CSS Flexbox commence à voir une utilisation plus répandue et est désormais pris en charge dans tous les principaux navigateurs. Dans le cours complet, 6 Flexbox Projects for Web Designers, nous allons construire sur mon cours antérieur CSS: Flexbox Essentials et décrire six projets concrets de CSS pour un usage quotidien.

Nous avons également construit un guide complet pour vous aider à apprendre le CSS en ligne, si vous commencez juste avec les bases, ou vous souhaitez explorer des CSS plus avancés. Découvrez Learn CSS: The Complete Guide.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.