La div ne veux pas se centrer avec grid

[schtroumph]

Salut

Je n'arrive pas centrer une div du titre des articles.

Le html :

<div class="flexi element field_titre-tuto singlecol">
<div class="flexi value field_titre-tuto  nolabel ">
<h2>Framadate : participer à un sondage</h2> </div>
</div>

Le css :

.fiche-tuto .element.field_titre-tuto {
display:grid;
align-self:center;
justify-items:center;
}

Pour mieux voir j'ai mis une bordure en couleur pour chaque div. C'est la div verte qui ne veux pas se centrer malgré le align-items sur le parent.

Voir une installation de test

Joomla 3.10.2

[Helloo]

Hello,

Deactive voir le display:grid; pour voir la différence.

Essaye avec display: flex;

[schtroumph]

Je veux bien, mais ça devrait marcher avec Grid. Il y a une raison pour laquelle tu me demandes d'essayer avec Flex ? car j'aimerais savoir pourquoi ça ne marche pas avec Grid.

[lomart]

Bonsoir,

Si tu as cela comme HTML, ça se centre

<div class="flexi element field_titre-tuto singlecol">
  <h2>Framadate : participer à un sondage</h2>
</div>

Mais ton CSS est compliqué, ne serait-ce qu'à relire. Le logo est défini 8 blocs au-dessus...

En général, on réserve les grid pour la mise en page générale et les flex pour les blocs internes

[schtroumph]

Bonsoir,

Si tu as cela comme HTML, ça se centre

<div class="flexi element field_titre-tuto singlecol">
<h2>Framadate : participer à un sondage</h2>
</div>

C'est Flexicontent, donc c'est pas moi qui l'ai fait.

Mais ton CSS est compliqué, ne serait-ce qu'à relire. Le logo est défini 8 blocs au-dessus...

Dans mon fichier scss tout ce qui correspond au logo est juste avant le titre :

/************************/
/***** LES ELEMENTS *****/
/*---- IMAGE LOGO ----*/

.field_logo {display:grid;}

.blog-tutos .field_logo figure,
.fiche-tuto .field_logo figure {
    margin:0;
    padding:0;
    justify-self:center;
}

.field_logo img {border:0;}

/*---- TITRE DU TUTO ----*/

.blog-tutos .titre-tuto h2,
.fiche-tuto .field_titre-tuto h2 {
    color:#fff;
    margin:0;
}

.blog-tutos .titre-tuto {align-self:center;}

.blog-tutos .titre-tuto h2 {
    font-size:1.9rem;
    text-align:center;
    margin:0 16px 0 0;
    padding:0;
    line-height:35px;
}

.fiche-tuto .element.field_titre-tuto {
    display:grid;
    align-self:center;
    justify-items:center;
}

.fiche-tuto .field_titre-tuto h2 {
    font-size:1.9rem;
    text-align:center;
    line-height:43px;
}

Je ne dis pas que l'organisation de mon css ne peux pas être amélioré (c'est ce que je fais au fur et à mesure), mais c'est la mienne et je m'y retrouve . Je trouve qu'il est pas trop mal organisé dans l'ensemble. Pour moi.

Bonsoir,

En général, on réserve les grid pour la mise en page générale et les flex pour les blocs internes

En général. Mais rien n'empêche de n'utiliser que l'un ou que l'autre. Techniquement, si l'on utilise que l'un ou que l'autre ça marche quand même. En tout cas de mon côté ça a toujours marché.

[lefabdu51]

bonjour, question idiote en lisant le code:
ce ne serait pas sur ce sélécteur que tu devrais jouer :
singlecol
car le nom veux dire une seule colonne.... donc pour moi c est la ou je placerais mes css ou ce ne serait pas ce qui te cause du soucis ?
peux tu poster les règles appliquées à ce sélécteur?

[schtroumph]

Il n'y a que cette règle :

.customblock .element.singlecol {
    width: 100% !important;
    padding: 0% !important;
}