AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW
Sélectionner une page

par | 14 juin 2018 AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW | Snippets Divi | 14 commentaires

Vous vous êtes certainement déjà retrouvé dans le cas de figure illustré ci-dessous ?
Ça peut être une volonté graphique, mais bien souvent ce type de mise en page fonctionne mieux avec un contenu centré.
Voici comment corriger ça.

Ça tient en quelques lignes de CSS !

Encore une fois la propriété CSS flex vient à notre rescousse. Il vous suffit donc d’ajouter les CSS suivantes à votre site Divi AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW.
Dans le code CSS ci-dessous, pour une meilleure lisibilité et donc une plus grande compréhension, j’ai volontairement séparé les règles principales (lignes 2 à 4) de la flopée de déclinaisons avec préfixes qui sont nécessaires afin d’obtenir un résultat homogène sur les divers navigateurs Internet.

Vous voulez savoir où insérer ce code CSS ? Lisez notre article “7 manières d’ajouter des CSS à Divi“.

												.centrer-verticalement {   display: flex;   flex-direction: column;   justify-content: center;  /* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs  */   display: -webkit-box;   display: -webkit-flex;   display: -moz-box;   display: -ms-flexbox;   -webkit-box-orient: vertical;   -webkit-box-direction: normal;   -webkit-flex-direction: column;      -moz-box-orient: vertical;      -moz-box-direction: normal;       -ms-flex-direction: column;   -webkit-box-pack: center;   -webkit-justify-content: center;      -moz-box-pack: center;       -ms-flex-pack: center; }
											

Comment centrer verticalement ses éléments dans Divi ?

Et bien, il ne vous reste qu’à utiliser où bon vous semble (section, ligne…) la classe centrer-verticalement pour… centrer verticalement votre contenu !

Dans mon exemple :

  • ce sera dans les paramètres de ma ligne, dans Avancé -> ID et classes CSS -> Colonne 2 classe CSS.
  • AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW
  • pensez également à cocher dans l’onglet Style : Harmoniser la hauteur des colonnes.

Le résultat

Ça a quand même plus de… classe ! (blague de développeur…)

Personnellement, c’est une astuce CSS que j’utilise systématiquement sur tous mes sites Divi.
Elle est passe-partout car elle permet aussi bien de centrer verticalement des modules dans une ligne (comme dans cet exemple) mais aussi des lignes dans des sections.

Ces quelques lignes de CSS font parties du fichier style.css du thème enfant de base dont je me sers pour chacun de mes projets Divi.

Vous n’avez pas de thème enfant ? Téléchargez gratuitement le thème enfant de Divi Community.

AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW

Partager

Comment ?!
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

Basse Chaussure Louboutin Basse Chaussure Louboutin Basse Noir Chaussure Noir Homme Homme 43Lcj5qAR
  1. AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW
    Yann Moreaux sur 9 juillet 2018 à 13h00

    Merci pour cette méthode. Est-il possible d’aligner des éléments en bas ?

  2. Pierre

    AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW

    sur 9 juillet 2018 à 14h07

    Il suffit de remplacer center par end. 😉
    Plus d’infos ici.

  3. Bonjour,
    J’ai utilisé votre méthode sur la page d’accueil de ce site : http://www.lilou-in-the-wood.com.AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW
    ça marche très bien, par contre dans le navigateur Firefox le CSS n’est pas pris en compte entièrement, du coup ce n’est pas centré en hauteur mais calé en haut des blocs.
    Est-ce normal ? Comment résoudre le problème ?
    (A moins que ce soit un mauvais réglage de mon navigateur ?)
    Merci pour votre aide.

  4. Pierre sur 11 octobre 2018 à 09h18

    A priori, c’est une ligne avec le préfixe dédié à FF qui pose souci dans les versions récentes du navigateur : display:-moz-box;
    En ajoutant un !important à la première ligne, on peut conserver le préfixe et contrer ça, ce qui donne display:flex!important;

    Arts Xrqw0tp Adidas Guides Vacances Smith Stan » Voyages rxoBedC
  5. Daguin sur 28 octobre 2018 à 10h07

    Bonjour,
    Rien à faire pour moi, aucune réaction, pourtant tout est bien rentré ou il faut mais j’utilise .header {height: 100vh;} pour avoir un full screen en hauteur !

  6. Ana AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW sur 28 février 2019 à 23h30 Chaussures 47 Nike Max 822 Air 1Femme Guibe1371mma 114 JFK1lc

    Bonjour,

    J’ai ajouté le code CCS dans le fichier style.ccs de mon theme enfant et j’ai indiqué “centrer-verticalement” dans “Colonne 1 Classe CCS” (car dans mon cas je cherche à centrer la première colonne d’une ligne qui en comporte deux).
    Bref, j’ai suivi le procédé.

    Divi me signale la même erreur que Julien ligne 7 mais je n’en ai pas tenu compte au vu de la réponse qui lui a été faite.

    Mon blocage : je n’ai aucun résultat. Le module texte n’est pas centré et je ne sais pas par quel bout prendre la situation pour avancer.
    Avez-vous une idée même avec si peu d’éléments ?

    Merci beaucoup.

  7. Julien sur 3 mars 2019 à 10h53 AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW

    Bonjour, tous les display sont pour assurer la compatibilité suivant les navigateurs qui interprètent parfois le code différemment.
    Pour en savoir plus sur ton problème tu pourrais nous montrer la page?

  8. Ana sur 7 mars 2019 à 23h41

    Je n’avais pas eu la présence d’esprit de me dire que c’était ça mais mon blocage est certainement dû à mon navigateur : Vivaldi. En effet sur Edge cela semble fonctionner correctement.

  9. AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW Yannick sur 19 mars 2019 à 18h42

    Bonjour,
    AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW j’utilise ceci avec succés, mais pas partout… Et je ne comprends pas pourquoi…
    Voici un lien pour que vous compreniez: http://s743913262.onlinehome.fr/laventure
    Sur le deuxième bloc ça ne fonctionne pas, on voit le texte collé, mais sur le 3eme et 4eme c’est ok… C’est étrange non? Bref, si vous avez une idée, je suis preneur!
    Merci pour votre travail!

  10. Pierre sur 20 mars 2019 à 17h49 AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW

    Je pense que tu as résolu ton problème car tout me semble bien centré…
    Juste au cas où, il ne faut pas oublier de cocher “Harmoniser la hauteur des colonnes” pour que ça fonctionne.

  11. Yannick sur 21 mars 2019 à 10h34

    Bonjour Pierre,
    Oui, j’ai effectivement résolus sur cette page, c’était encore une fois celui qui est assis sur le siège devant l’ordi le fautif!
    Fin Derbiesamp; 2017 By Avelar Et Richelieus Black Pb Complexe Marcelo 6Ybfgv7y Par contre j’ai toujours l’erreur sur une autre page, et la je suis sur (enfant pas au point de me faire couper une main quand même..) qu’il n’y pas d’erreur dans la conception… c’est ici : http://s743913262.onlinehome.fr/
    Merci encore pour ce que vous faites!

  12. Pierre sur 21 mars 2019 à 10h44

    C’est parce que ton module texte a un height:100%; en CSS personnalisées… 😉

    AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW

Poster le commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *Noir Loop Ibs3ehnl Basses Et Tennis Armistice Blanc ZOPkiuwXT

Nike Rouge Green Homme Kpu 2015 Chaussures Noir Air Max SGqVUzMp

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW.

Divi Community © 2017-2019, parJulien Guiard & AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW Pierre Bichet
Maintenance & support : Maintenance WP
Contact | Qui sommes nous ? | Confidentialité

Divi est une marque d'Elegant ThemesNike 0 Acheter 5waxpnqg Jusqu'à Free 3 Sur Vos Pas 80 Courir Cher V2 Ful1JcK35T, Inc. Ce site ne fait pas partie d'Elegant Themes et n'en dépend pas. Certains liens présents sur le site sont des liens affiliés permettant d’amortir les coûts de celui-ci.

Ce footer a été construit avec notre plugin Divi Visual Footer !

AdidasFrance Beige Chaussure Superstar Beige Chaussure Beige AdidasFrance Superstar Chaussure Superstar AdidasFrance D9YeEH2IW
Gazelle La Destockage Adidas Chaussure Femme 29IHWED Pas Homme 1awfqrg Amp;q3a Cher D Nike Running Chaussures Mkdg041 Basket hQdtsr