- WordPress :6.7
- Statut : résolu
- Ce sujet contient 17 réponses, 2 participants et a été mis à jour pour la dernière fois par
, le il y a 1 mois et 2 semaines.
-
Messages
-
Bonjour,
Ma configuration WP actuelle
- Version de PHP/MySQL : 8.0.30 / 8.0.40-31
- Thème utilisé : OceanWP Child
- Extensions en place :
- Nom de l’hébergeur : OVH
- Adresse du site :
Problème(s) rencontré(s) : j’utilise Elementor. J’ai créé une section de type grille avec 3 colonnes : texte, image, bouton. L’objectif est de centrer verticalement ces 3 boutons. Suivant des recommandations, j’ai appliqué ce css aux 3 boutons :
.centrer-vertical {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* Facultatif si vous voulez centrer horizontalement aussi */
height: 100%;
}
Pourtant, ils restent tous les 3 alignés sur le haut. Pourquoi ?Bonjour,
Puisque c’est une question de CSS il faudrait pouvoir accéder à la page où figurent ces trois blocs. A priori, sans rien voir, je dirais que la règle « flex » n’est pas appliquée à la bonne cible. Elle doit s’appliquer non pas aux boutons mais à l’élément (div, section…) contenant ces ces boutons
Merci pour votre réponse.
Jusqu’à maintenant, j’étais en mode brouillon. Pour que ça soit visible mais pas sur le site, j’ai créé une catégorie « hors site » et publié : https://www.mfr-vercors.fr/bienvenue-au-cfp-mfr-clone/.
D’accord. Et où exactement sont ces trois blocs dont vous parlez? Ce sont les » Trois préoccupations majeures » (page présentation cfp-mfr)?
Désolé de mettre un temps fou pour répondre…
Non, les 3 blocs dont je parle sont uniquement présents sur la page https://www.mfr-vercors.fr/bienvenue-au-cfp-mfr-clone/. Il s’agit (de gauche à droite) d’un bloc texte, puis un bloc image et enfin un bloc bouton. (D’ailleurs, j’étais parti d’un autre article que j’ai cloné et du coup le reste de l’article n’a aucun sens ; quand ça sera au point, ça ira sur cet article : https://www.mfr-vercors.fr/on-parle-de-nous/)
Désolé de mettre un temps fou pour répondre…
Pareil pour moi. On a tous des tas de choses à faire.
Essayez le code CSS ci-dessous.
OK mais cet ID (#content) et cette classe (.e-con-inner), ils existent ?
Ben d’après ce que je vois sur ce que vous montrez, oui, je ne les ai pas inventés. Vous avez essayé le code?
Vous avez essayé le code?
Oui, à l’instant ! Mais du coup, les 3 blocs sont alignés verticalement les uns au-dessous des autres et c’est pas ce que je souhaite (ils devraient restés à l’horizontal mais centré verticalement)
Je n’avais pas compris. Enlevez le code précédent (remettez en « grid »).
Le code à essayer serait donc celui-ci:
Cela marchera pour les deuxième et troisième blocs dont le contenu ne comprend qu’un élément (une image et un bouton) mais pas pour le premier qui contient deux éléments (deux p). Il faudrait encadrer ces deux p par une div et le résultat devrait être ce que vous souhaitez. Une autre possibilité est de combiner les deux p en un seul.
Merci parfait mais j’aimerais comprendre : vous dites « remettez en grid » et dans le code proposé, on a display:flex;
De plus, pouvez-vous m’expliquer pourquoi ça marche ? (je comprend (à peu près) le html et le CSS))
Je reviens vers vous car ce qui marchait parfaitement sur ma page de test https://www.mfr-vercors.fr/bienvenue-au-cfp-mfr-clone/ n’est pas très joli sur la page cible https://www.mfr-vercors.fr/on-parle-de-nous/. Le bloc texte est trop large et du coup, l’image est fortement réduite. J’ai tenté d’agir sur la largeur du div « texte », mais rien à faire. Pouvez-vous me dire quoi faire ?
Bonjour,
Vous avez une div class = « e-con-inner » qui contient trois éléments div class = « elementor-widget-container » . Vous aviez initialement affiché ces trois éléments dans une grille (dans votre html on voit div class = « e-con-inner » GRID. Comme j’avais mal compris ce que vous vouliez je vous avais demandé d’afficher en flex pour arriver à ce que je vous ai montré : les trois éléments l’un sous l’autre.
Après avoir compris ce que vous vouliez vraiment (simplement centrer verticalement le contenu de chaque bloc), appliquer flex à la place de grid à l’élément div class = « e-con-inner » devenait inutile voire compliquait les choses. Donc mieux vaut rester en grid.
Pour centrer verticalement le contenu de chaque bloc, il faut procéder comme vous l’aviez essayé au début: utiliser un affichage flex et centrer verticalement mais vous n’aviez pas le bon sélecteur ( .centrer-vertical n’existe pas; le sélecteur correct est .elementor-widget-container). D’où le dernier code CSS que je vous ai donné. Ce code centre les éléments « enfants » de premier rang contenus dans la div .elementor-widget-container. Tout va bien pour les deuxième et troisième blocs: il y a un seul élément (une image, un bouton), il est donc bien centré. Pour le premier bloc vous avez deux « enfants » de premier rang (deux paragraphes). Le code les force à se centrer et cela aboutit à les placer horizontalement l’un et l’autre au centre. Cela équivaut à créer une quatrième colonne. Vous pouvez essayer. Pour éviter cela, le plus simple est de les inclure dans une div qui deviendra alors le seul « enfant » de premier rang et pourra être centré.
Donc pour votre question:
Merci parfait mais j’aimerais comprendre : vous dites « remettez en grid » et dans le code proposé, on a display:flex;
Simplement Grid et flex ne sont pas appliqués aux même éléments :e-con-inner dans le premier cas et elementor-widget-container dans le second.
Une dernière précision: le code contient #content .e-con-inner .elementor-widget-container alors que la cible est .elementor-widget-container . Ce qui est avant sert à renforcer et préciser la cible. Cela signifie appliquer le code à .elementor-widget-container qui est dans .elementor-widget-container qui est dans #content.
A ce sujet, le code s’appliquera à tous les .elementor-widget-container remplissant les conditions ci-dessus. Si vous avez les mêmes 3 blocs sur une autre page mais vous ne souhaitez pas les centrer, il faudra ajouter une précision supplémentaire. Par exemple la page où vous avez les trois blocs a l’id 5516 .Le sélecteur peut alors être mieux précisé : #post-5516 #content .e-con-inner .elementor-widget-container
- Vous devez être connecté pour répondre à ce sujet.