Des images ne veulent pas se centrer

[Visiteur]

Salut

Dans les articles que nous mettrons sur notre site il y aura ceux que nous ferrons nous même et des articles extérieurs. Pour ces derniers il y aura le site d'où vient l'article, la date de parution, l'image de cet article, le paragraphe d'intro et le lien vers la page où se trouve l'article (donc sur un site extérieur au notre). Pour les notre ça sera le système classique avec le lien lire la suite.

Au niveau du code, j'utilise les champs personnalisés et Content Templater (de Regular Labs) et comme il n'y aura pas exactement les mêmes éléments entre les nos articles et les articles extérieurs, j'ai fait 2 mises en pages :

Pour nos articles :

<div class="actu-blog actu-ak">

    <div class="actu-img">
        {field 9}
    </div>

    <div class="actu-intro actu-ak-intro">
        {field 10}
    </div>

        <hr id="system-readmore" />

    <div class="actu-complet-intro">
        {field 11}
    </div>

    <div class="actu-complet-suite">
        {field 12}
    </div>

</div>

Pour les articles extérieurs :

<div class="actu-blog actu-exterieur">

    <div class="actu-source">
        <span class="source">{field 13}</span><span class="date">{field 14}</span>
    </div>

    <div class="block-ext-img-intro">
        <div class="actu-img actu-ext-img">
            {field 15}
        </div>
        <div class="actu-intro actu-ext-intro">
            {field 16}
        </div>
    </div>

    <div class="actu-lien-suite">
        {field 17}
    </div>

</div>

J'ai réussis à centrer horizontalement les images pour nos articles (les articles de la catégorie Aman Komunak) mais le centrage verticalement n'est pas bon. Par contre pour les articles extérieurs (catégorie ZAD) je n'arrive pas à les centrer ni verticalement ni horizontalement.

Je me suis bien pris la tête pour trouver une bonne organisation des 2 codes. Mais je sais pas s'il sont bien ou si ça pourrait être mieux.

Le site est sous joomla 3.8.12 et voici un lien vers une installation de tests.

[Visiteur]

Pour block-ext-img-intro (les articles de la catégorie ZAD) c'est normal que ça ne marchait pas j'avais oublié une virgule dans mon LESS :

.blog .actu-ak[COLOR=#FF0000][B],[/B][/COLOR]
.block-ext-img-intro {
    position: relative;
    display:grid;
}

Mais il me reste le probleme de actu-ak (les 2 premiers articles, donc la catégorie Aman Komunak) il y a un espace juste avant l'image et le texte d'intro (ce dernier apparait au survol du curseur) et je n'arrive pas a voir d’où il vient.

[chabi01]

Bonjour,
Dans ton template, custom.css, ligne 942, ajoute : margin : 0 auto;

Cordialement,

[Visiteur]

C'est pareil. Par contre je comprend pas pourquoi un margin sur actu-ak alors que c'est a l’intérieur de ce block que ça ne marche pas. Mais je viens de me rendre compte que les éléments actu-img et actu-intro sont bien centrés, mais par rapport à actu-ak et non par rapport à leur propre ligne (les 2 étant dans grid-row:1; ).

[Visiteur]

En fait c'est normal que ça se centre par rapport à actu-ak puisque celui-ci a une position: relative; et les 2 éléments ont eu une position: absolute; donc ils sorte du flux mais sont centré par rapport au limite de actu-ak.

[chabi01]

J'ai testé ce que je t'ai écris de mon côté : cela fonctionne chez moi...
Cordialement,