La div ne veux pas se centrer avec grid

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • La div ne veux pas se centrer avec grid

    Salut

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

    Le html :

    Code 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 :

    Code:
    .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
    Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

  • #2
    Hello,

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

    Essaye avec display: flex;

    Commentaire


    • #3
      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.
      Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

      Commentaire


      • #4
        Bonsoir,

        Si tu as cela comme HTML, ça se centre
        Code HTML:
        <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
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Envoyé par lomart Voir le message
          Bonsoir,

          Si tu as cela comme HTML, ça se centre
          Code HTML:
          <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.

          Envoyé par lomart Voir le message
          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 :
          Code:
          /************************/
          /***** 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.

          Envoyé par lomart Voir le message
          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é.
          Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

          Commentaire


          • #6
            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?

            Commentaire


            • #7
              Il n'y a que cette règle :
              Code:
              .customblock .element.singlecol {
                  width: 100% !important;
                  padding: 0% !important;
              }
              Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X