Centrer verticalement une image dans une rangée

Replied by ced1870 on topic Centrer verticalement une image dans une rangée

Posted 3 years 10 months ago #56962
ok , alors essaie avec ce code CSS
Code:
.pajade-flex div.cktype { height: 100%; } .pajade-flex div.imageck { height: 100%; display: flex; flex-direction: column; justify-content: center; } .pajade-flex div.imageck img { margin: auto !important; }

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by jmgroud on topic Centrer verticalement une image dans une rangée

Posted 3 years 10 months ago #56984
Bonjour Cedric

Merci pour cette exemple. Ca ne fonctionne pas tel-quel mais si j'ajoute ...
Code:
.pajade-flex div.innercontent { height: 100%; }
L'image est bien centrée verticalement :)

Le centrage vertical est possible, mais ceci ne fonctionne pour l'instant que pour l'image...:(
En effet, si je remplace l'image par un autre objet, un simple texte (exemple du bloc de droite) ou un autre objet (onglets, boutons, etc...), ce centrage vertical ne fonctionne pas.
Si j'ai bien compris, le centrage lui-même s'effectue par les lignes...

.pajade-flex div.imageck img {
margin: auto !important;
}

Ligne directement associée à la classe "imageck"...
Si je remplace l'image par du texte (par exemple), cette classe est remplacée par "cktext", donc pas de centrage.

Si je devais mettre en place cette méthodologie de façon globale, et si j'ai bien compris le système, il faudrait ajouter dans le CSS personnalisé dans mon template des lignes spécifiques pour tous les objets disponibles dans la liste de gauche dans Page Bulder CK, donc pour les images, les textes, les boutons, les sliders, les images animées, les onglets horizontaux et verticaux, etc... Oui ? Non ?

Hormis le fait que c'est "un peu galère" pour centrer tous ces objets (bcp de lignes de programmations), il faudrait :
- Créer une classe spécifique pour cadrer en haut
- Créer une classe spécifique pour cadrer en bas
- Et le faire pour toutes les classes des objets qui peuvent être déposés dans les blocs.

J'image que tout ceci doit fonctionner, mais à chaque modification de version de Page Builder CK, nous pouvons rajouter le risque de voir éventuellement d'autres classes apparaître, disparaître, se modifier, etc... Il faudrait donc à chaque mise à jour de Page Builder CK vérifier que le CSS personnalisé fonctionne toujours.

Je me pose donc la question suivantes : N'est-il pas possible de simplifier ?
Première idée
Avoir dans Page Bulder CK (dans une prochaine version) la possibilité d'un centrage vertical à l'intérieur d'un bloc, et ceci quelque soit le contenu du bloc ?
Deuxième idée
Avoir un CSS personnalisé mais plus simple qui permettrait de centrer le bloc complet (et non pas son contenu).
J'imagine (peut-être à tors) gérer la position verticale du bloc de classe "cktype" (en haut, en bas ou au centre) car ce bloc semble être celui qui ne change jamais de nom quelque soit son contenu. Dans ce cas, si vous avez des idées de customisation CSS (haut, bas, centre), je suis preneur.

N'étant pas du tout à la hauteur des spécialistes CSS j'en ai mal à la tête :whistle:
Un grand merci d'avance.
Jean-Marie

Le peu que je sais est occulté pas le trop que je ne sais pas !

by jmgroud

Please Log in or Create an account to join the conversation.

Replied by jmgroud on topic Centrer verticalement une image dans une rangée

Posted 3 years 10 months ago #56985
Après quelques "bidouilles" sans forcément tout comprendre mais tout semble fonctionner...
Voici ce que j'ai indiqué au niveau de la customisation CSS du template :
Code:
.pajade-haut div.innercontent { height: 100%; display: flex; flex-direction: column; justify-content: center; } .pajade-centre div.innercontent { height: 100%; display: flex; flex-direction: column; justify-content: center; } .pajade-bas div.innercontent { height: 100%; display: flex; flex-direction: column; justify-content: center; } .pajade-haut div.cktype { margin-top: 0 !important; margin-bottom: auto !important; } .pajade-centre div.cktype { margin-top: auto !important; margin-bottom: auto !important; } .pajade-bas div.cktype { margin-top: auto !important; margin-bottom: 0 !important; }

Il semblerait que l'on puisse avoir une certaine liberté de programmation avec Page Builder CK:
- J'ai créé 3 classes : une pour afficher en haut (pajade-haut), une en bas (pajade-bas), une autre pour centrer verticalement (pajade-centre)
- Si j'indique une de ces 3 classes dans la zone "class" de la partie "row_ID", tous les blocs réagissent de la même façon
- Si je désire avoir un cadrage vertical différent sur des blocs d'une même ligne, je laisse vide la zone "class" de la partie "row_ID" et j'indique la classe de cadrage dans la zone "class" de la partie "block_ID".
- Dans tous les cas, la zone "class" de la partie "ID" reste vide.

Tout semble fonctionner mais...

- Le code CSS que j'ai écrit est-il bien optimisé (j'ai dupliqué les 3 premières définitions de classes) ?
- Pensez-vous que ma méthode soit correcte ?
- Dommage qu'on ne puisse pas avoir ce choix de cadrage vertical directement dans Page Builder CK et que l'on soit obligé de passer par des créations de classes, dommage mais pas bloquant :whistle:

Pouvez-vous me dire ce que vous pensez de ma méthode et de l'écriture du CSS... :)
Merci
Jean-Marie

Le peu que je sais est occulté pas le trop que je ne sais pas !

by jmgroud

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Centrer verticalement une image dans une rangée

Posted 3 years 10 months ago #56992
je suis content que tu ais réussi à faire ce que tu veux, et oui on a un peu de liberté de création dans Page Builder CK ;)
pour ton code, il n'est pas si mal, à ta place je le garderais comme cela. Merci pour ton retour d'info

Joomlack Webmaster and Developer

by ced1870
The following user(s) said Thank You: jmgroud

Please Log in or Create an account to join the conversation.

Time to create page: 0.662 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 528 guests and no members online