Centrer verticalement une image dans une rangée

Bonjour à tous

Je découvre "Page Bulder CK"... Très pratique, assez facile à comprendre, mais je reste sur un problème de centrage vertical.
J'ai créé une rangée de 2 colonnes, la première avec une image, la deuxième avec un texte.
J'ai paramétré les 2 colonnes en "Default vertival alignment" de façon à avoir la même hauteur dans mes deux blocs (ils peuvent en effet avoir une couleur de fond et je dois absolument garder cette hauteur identique sur toute la rangée.

Je n'arrive pas à avoir le centrage vertical
- Pour mon image lorsque le texte est assez long (voir exemple ci-joint)
- Et l'inverse, centrer verticalement le texte lorsque l'image est plus haute

J'ai l'impression que le centrage vertical est une "sacrée galère" pour les "non spécialistes" CSS... J'en transpire encore malgré qq heures de recherches.
Y aurait-il une solution assez simple ? Car je dois ensuite former mon client qui n'est pas informaticien pour qu'il s'en sorte seul...

Merci d'avance pour vos idées.
Jean-Marie

Bonjour
J'essaie de trouver une solution par moi-même mais pour l'instant, je n'ai pas trouvé avec "Page Builder CK";

Par contre, avec l'outil de debug de Firefox, en modifiant certaines valeurs CSS, j'y arrive...
Voici une solutions (il y en a peut-être d'autres...).
J'ai utilisé la méthode "flex" en indiquant l'alignement sur l'enfant, donc
- J'ajoute "display:flex;" sur le parent
- J'ajoute "margin:auto;" sur l'enfant
L'image est positionnée dans un "div" qui fait la même hauteur que l'image, et ce "div" est également positionné dans un autre "div" qui fait également la même hauteur. Ce n'est donc pas l'image qu'il faut centrer verticalement, mais le "div" de plus haut niveau qui la contient (c'est en tout cas mes conclusions... elles sont peut-être fausses mais ca fonctionne...).

Voici le codage brut de forme venant de "Page Builder CK" sans aucun CSS personnalisé.
Voici le codage avec les modification manuelles du CSS par l'outil d'inspection (en vert)


J'ai donc modifié 2 lignes :
- Le "div" de classes "inner animate resizable" avec "display:flex" (le "parent")
- le "div" de classes "innercontent uick-sortable" avec "margin:auto"

La mise en place du site de mon client (et éventuellement d'autres sites) me fait poser plusieurs questions :

1. Est-ce la bonne méthode ?
2. Si "NON", quelle méthode est-il préférable d'utiliser pour une compatibilité maximum sur tous les navigateurs ?
3. Comment paramétrer avec Page Builder CK (avec cette méthode ou une autre...) pour...
   1. Avoir une méthodologie simple permettant à mes clients de s'en sortir seul dans la constitution de ses articles (je ne parle pas du template bien entendu) ?
   2. Avoir un cadrage vertical vers le haut, centre ou bas : Pour tout le site (j'image une information dans le template) ?
   3. Avoir un cadrage vertical vers le haut, centre ou bas : Pour certaines rangées complètes de blocs (j'image par Page Bulder CK, donc accessible par mes clients) ?
   4. Avoir un cadrage vertical vers le haut, centre ou bas : Pour un bloc particulier (j'image une information dans le template, donc accessibles par mes clients) ?

J'ai essayé de customiser les CSS par Page Builder CK mais les codes CSS modifiés ne vont pas sur les bonnes classes... d'où ma demande ici dans le forum.

Merci d'avance pour vos retours
Jean-Marie

salut
tu peux utiliser le bouton N°2 ici
www.joomlack.fr/documentation/page-build...n-interface-overview
pour ajouter tes règles CSS perso pour une page donnée
sinon tu peux le faire dans ton template pour l'appliquer à tout le site

pour gérer des classes CSS tu peux utiliser le bouton N°3 pour ajouter une classe à n'importe quel élément
tu pourrais donc définir une classe "foobar" sur un élément et dans ton css perso avoir .foobar { ... }

après pour la partie "rendu", ici c'est spécifique à ton projet, à toi de voir les CSS que tu veux utiliser et ce que tu veux faire

CEd

Merci pour ces informations CEd.
Pour tout avouer, je n'avais pas encore bien compris la signification des icônes en bas à droite... merci pour ces explications.

J'ai testé la mise en place des classes sur l'ensemble des 3 niveaux proposés : row_ID, block_ID et ID...
J'ai indiqué la classe "pajade-flex" pour les "row" et le "block" (contenant uniquement "display: flex;" dans mon template) et une la classe "pajade-centre-vertical" (contenant uniquement "margin: auto;" dans mon template).
Le centrage vertical ne fonctionne pas...


En revenant sur la visualisation du html et du CSS par l'inspecteur de Firefox je me sui aperçu que ce paramétrage intervenait au niveau des lignes suivantes :
- Pour le premier niveau (les "row")
- Il y a ensuite un autre div de niveau inférieur sans paramétrage spécifique
- Pour le deuxième niveau (les block")
- Il y a ensuite 2 niveaux de div de niveau inférieur sans paramétrage spécifique
- Ensuite vient le div de centrage.


Pour obtenir le centrage, je dois ajouter manuellement la classe "pajade-flex" aux 2 niveaux de div au-dessus de l'image (mais inaccessible sous Page Builder CK"
class="innercontent uick-sortable pajade-flex"
class="cktype pajade-flex"

C'est galère... et pour l'instant je n'ai pas trouvé de solution simple pour mon client puisse de lui même paramétrer en haut, centré ou en bas.
Dois-je modifier (surcharger) les classes "innercontent" ou "uick-sortable" et "cktype" dans mon template ? Mais quel est le risque pour les autres développements ?
Là j'avoue être perdu... je ne maitrise pas assez les imbrications CSS et ne connait pas la signification des classes "innercontent" ou "uick-sortable" et "cktype" pour me permettre de surcharger (avec !important) dans une définition CSS.
:S

si tu mets une classe css sur un parent, tu peux accéder à n'importe quel enfant en pointant bien ton sélecteur
donne moi l'url de la page que je puisse jeter un oeil, meme si ce n'est pas vraiment lié à page builder ck ...

Merci Cedric

Voici l'URL de la page qui pose problème : pajade.fr/index.php/fr/

Pour avoir l'affichage du problème tu dois te connecter (en haut à droite) avec l'utilisateur "tests" et le mot de passe "tests22678"
Tu tomberas en premier lieu sur le problème d'affichage du menu (autre post en cours avec HikaShop) mais en scrollant vers le bas tu trouveras le problème "INFORMATIONS LIVRAISONS".
La première méthode a été effectuée par un tableau simple dans un article standard sans "Page Builder CK".
Juste après (cadre rouge), tu trouveras l'article avec "Page Builder CK".

Tu as certainement raison sur mon manque de connaissance CSS... Mais je soigne petit à petit, je te promets que je teste, j'essaie différentes possibilités, j'essaie d'avancer et de déranger le moins possible les personnes comme toi sur les forums.
Ce qui est certain c'est que je mettrai ici la solution trouvée en espérant qu'elle servira à d'autres
Désolé pour le dérangement.