27799 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'utilise Knacss 7.1.3 pour un template et j'ai besoin d'aligner verticalement deux div contenues dans un div :

<div class="grid-2-small-1 mtl has-gutter-xl">
  <div id="container" class="grid-1 center w66">
    <div class="grid-2">
      <div class="grid-1 center vmiddle">
        <div><span><a href="#" title="Consulter le catalogue" target="_blank">Consulter</a></span></div>
      </div>
      <div class="grid-1 right vmiddle">
        <div><a href="#" title="Consulter le catalogue" target="_blank"><i class="fas fa-chevron-circle-right"></i></a></div>
      </div>
    </div>
  </div>
</div>


J'ai testé avec vmiddle mais cela ne marche pas. J'ai pas mal fouillé sur le net et pratiquement toutes les solutions proposées partent du principe que je connais à l'avance la hauteur du container mais malheureusement ce n'est pas le cas et pour les autres solutions à base de translate me font sortir du container les div à aligner.

Est-ce qu'il y a moyen de faire quelque chose à Knacss ou autre mais qui n'est pas une usine à gaz ?

Merci d'avance.
Modifié par flipflip (30 Mar 2021 - 17:26)
Administrateur
Hello,
flipflip a écrit :

J'ai testé avec vmiddle
Mais pourquoi vmiddle ? Où as-tu trouvé cela ? Ce n'est ni du CSS ni une valeur spécifique à KNACSS (ou aucun autre framework d'ailleurs à ma connaissance)

De nos jours, centrer verticalement sans connaître la hauteur est devenu "facile" grâce à Flexbox et Grid Layout : https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html

En clair, tu n'as pas besoin spécifiquement de KNACSS pour cela, mais si tu veux absolument le faire via KNACSS, la doc de la v7 peut t'aider (voir la partie Flexbox) : https://www.knacss.com/doc-old.html

Bonne chance Smiley smile
Meilleure solution
a écrit :
Mais pourquoi vmiddle ? Où as-tu trouvé cela ? Ce n'est ni du CSS ni une valeur spécifique à KNACSS (ou aucun autre framework d'ailleurs à ma connaissance)

Effectivement c'est une class que j'ai créé moi il y a 2 ans sur mon template mais j'étais persuadé qu'elle provenait de Knacss.

a écrit :
De nos jours, centrer verticalement sans connaître la hauteur est devenu "facile" grâce à Flexbox et Grid Layout : https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html

Comme quoi je n'avais pas assez chercher.

a écrit :
En clair, tu n'as pas besoin spécifiquement de KNACSS pour cela, mais si tu veux absolument le faire via KNACSS, la doc de la v7 peut t'aider (voir la partie Flexbox) : https://www.knacss.com/doc-old.html

J'utilise le mode grid est-ce que je peux mélanger avec des instructions flex ?

Merci pour ton aide.
Administrateur
flipflip a écrit :

J'utilise le mode grid est-ce que je peux mélanger avec des instructions flex ?

Il faudra choisir entre display: grid et display: flex; c'est l'un ou l'autre. Mais les propriétés d'alignement sont les mêmes ensuite oui Smiley smile