[Résolu] Alignement vertical sans connaitre la hauteur

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)

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.

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