Comment rendre le contenu centré verticalement dans la colonne Divi

Bien sûr, vous pouvez aligner verticalement votre contenu/modules dans une colonne en utilisant un espacement personnalisé (remplissage et marge). En utilisant les options d'espacement Divi, vous pouvez donner à la colonne un rembourrage égal en haut et en bas pour que le module soit centré verticalement dans la colonne. Vous pouvez également aligner le contenu en haut de la colonne en ajoutant un rembourrage inférieur.

Cependant, il peut ne pas être facile de conserver l'alignement sur différentes largeurs de navigateur et vous devrez peut-être ajuster l'espacement lors de la mise à jour de votre page avec plus de contenu.

Alors vous vous demandez peut-être comment aligner verticalement le contenu sans avoir à vous en soucier ?

Dans ce didacticiel, nous allons vous montrer comment vous assurer que la taille des colonnes s'ajustera à la taille de la colonne avec le plus de contenu dans la ligne en utilisant le paramètre " Égaliser les hauteurs de colonne " dans les paramètres de ligne qui ont " La propriété CSS "Flex" (Flex Box) qui vous permet de définir une longueur flexible sur des éléments flexibles.

Et aussi en utilisant le paramètre, nous rendrons le contenu centré verticalement dans Divi en ajoutant quelques petits extraits CSS pour aligner verticalement le contenu dans n'importe quelle colonne,

Passons à la pratique, d'accord ?

Commencez à créer du contenu centré verticalement dans la colonne Divi

Pour commencer, vous devez créer une nouvelle page puis utiliser le Divi Builder pour modifier la page. Une fois que vous êtes dans l'éditeur, sélectionnez Choisir une mise en page prédéfinie pour commencer à choisir une mise en page prédéfinie.

Pour ce didacticiel, nous utilisons la mise en page prédéfinie de Interior Design Company - Portfolio pour la démonstration. Si, par hasard, vous souhaitez modifier une page existante, vous pouvez ignorer cette partie et passer à la partie méthode de ce didacticiel.

Allez-y et sélectionnez la mise en page dans les packs de mise en page. Vous pouvez utiliser la fonction de recherche pour trouver la mise en page plus rapidement car Divi propose de nombreuses mises en page prédéfinies.

Une fois la mise en page chargée dans l'éditeur, ouvrez la deuxième ligne ou la première du paramètre Ligne d'étude de cas , accédez à l'onglet Conception puis ouvrez le bloc Dimensionnement et vous verrez que le paramètre " Égaliser la hauteur de la colonne " est déjà actif ce qui signifie que la propriété flex est présente sur cette ligne.

Dans ce didacticiel, nous utiliserons 2 méthodes pour démontrer la création de contenu centré verticalement dans Divi.

Méthode 1 : centrer verticalement le contenu à l'aide de l'alignement du centre de l'élément et de la marge automatique

La première méthode consiste à ajouter un petit extrait CSS aux paramètres de ligne pour ajuster automatiquement la marge.

Après vous être assuré que le paramètre " Égaliser la hauteur de la colonne " est actif dans les paramètres de ligne , continuez en accédant à l'onglet Avancé et basculez pour ouvrir le bloc CSS personnalisé . Dans l'éditeur de code Main Element , ajoutez-y l'extrait de code suivant.

 align-items : center ; 

Comme vous pouvez le voir dans l'image ci-dessus, le contenu de la colonne est centré verticalement.

Et vous pouvez faire en sorte que l'autre ligne applique le même extrait à son élément principal CSS afin que son contenu soit également centré verticalement en tirant parti de la fonctionnalité de style "Extend" de Divi.

Pour ce faire, survolez un peu l'éditeur CSS de l' élément principal , puis cliquez sur l'icône de débordement ou vous pouvez cliquer avec le bouton droit sur l' élément principal pour afficher l'option Étendre l'élément principal , puis procéder à sa sélection. Dans la fenêtre qui apparaît, il vous sera demandé où étendre l'extrait de code CSS. Appliquons-le à toutes les lignes de la section actuelle en sélectionnant l'option suivante.

• À : toutes les lignes
• Tout au long : cette section

Une fois que vous avez suivi les étapes ci-dessus, vous constaterez que toutes les colonnes sont centrées verticalement.

Vous pouvez également choisir de centrer individuellement le contenu de la colonne verticalement en ouvrant les paramètres de la colonne , puis en passant à l'onglet Avancé → Bloc CSS personnalisé pour placer la margin: auto; Extrait CSS dans l'éditeur de code Main Element .

Si vous souhaitez que le contenu soit aligné en bas ou en haut, vous pouvez le faire en modifiant la margin: auto; Extrait CSS comme suit :

• Aligné en bas : margin: auto auto 0;

• Aligné en haut : margin: 0 auto auto;

Méthode 2 : Aligner le contenu verticalement à l'aide de Flex Direction

Dans la première méthode, vous avez peut-être remarqué que l'arrière-plan de la colonne de texte rétrécissait pour s'adapter au contenu. Ce fond blanc est le fond de la deuxième colonne. Ainsi, si vous rendez l'arrière-plan de la ligne blanc au lieu de la colonne, l'arrière-plan blanc s'étendra sur toute la hauteur de la ligne, ou vous pouvez rendre l'arrière-plan de la page blanc.

Pour cette méthode, vous pouvez laisser la couleur d'arrière-plan par défaut. En utilisant le flex-direction pour aligner le contenu de notre colonne, non seulement vous n'avez pas à perdre le flex du paramètre " Equalize Column Height " qui maintient la même hauteur de colonne, mais vous conserverez également la couleur d'arrière-plan de l'étendue de la colonne à la hauteur de la ligne.

Voyons comment utiliser la direction flexible, commencez par ouvrir les paramètres de ligne de l'exemple précédent et effacez tout code personnalisé que vous pourriez avoir en cliquant avec le bouton droit sur le bloc CSS personnalisé , puis sélectionnez Réinitialiser le style CSS personnalisé .

Une fois que le CSS personnalisé est clair, continuez en revenant à l'onglet Contenu puis en ouvrant les paramètres de la colonne 2, puis passez à l'onglet Avancé et ajoutez l'extrait CSS suivant dans CSS personnalisé → Élément principal.

 affichage : flexible ;
flex-direction : colonne ;
justifier-contenu : centrer ; 

Maintenant, vous récupérez toute la hauteur de l'arrière-plan de la colonne et le contenu est également centré verticalement.

Si vous souhaitez aligner le contenu en haut ou en bas de la colonne, il vous suffit de modifier un peu l'extrait de code, qui est le justify-content: center; partie. Voici l'exemple de l'extrait modifié :

• Contenu aligné en haut :

 affichage : flexible ;
flex-direction : colonne ;
justifier-contenu : flex-start ; 

• Contenu aligné en bas :

 affichage : flexible ;
flex-direction : colonne ;
justifier-contenu : flex-end ; 

L'essentiel

L'alignement vertical de votre contenu peut être utile si vous avez des colonnes et que vous voulez vous assurer que l'autre colonne est centrée verticalement. Par exemple, vous voudrez peut-être que les logos de votre section de parrainage aient une disposition à cinq colonnes centrées verticalement, ou lorsque vous voulez vous assurer que votre bouton de téléchargement ou votre bouton CTA sur l'autre colonne est toujours centré verticalement.