Ancestors

Written by Julien W. on 2024-10-08 at 13:39

Les gens qui font du CSS, vous avez une super idée pour aligner les icônes dans un layout "table" avec une des cellules qui contiendrait:

texte

autre texte

faire que les icones soient alignées verticalement quel que soit le texte? Et que le texte "ait l'air" centré.

Pour l'instant on a un padding-inline-start en pourcentage pour pouvoir s'adapter à la taille de la cellule...

=> More informations about this toot | More toots from julienw@pouet.chapril.org

Toot

Written by Lamecarlate on 2024-10-08 at 13:45

@julienw Quand tu dis layout "table", c'est une vraie , un display: table, ou bien autre chose qui a l'air d'une table ? (de mémoire, dans les tables, on a un vertical-align: middle, mais ça fait un bail que je fais plus que du flex :D )

=> More informations about this toot | More toots from lamecarlate@pouet.it

Descendants

Written by Julien W. on 2024-10-08 at 13:46

@lamecarlate autre chose qui a l'air d'une table

=> More informations about this toot | More toots from julienw@pouet.chapril.org

Written by Lamecarlate on 2024-10-08 at 14:12

@julienw Tu peux poster un ptit exemple quelque part ? Normalement avec flex / inline-flex, c'est trivial (mais dans la vraie vie on sait bien que c'est jamais trivial :D ).

=> More informations about this toot | More toots from lamecarlate@pouet.it

Written by Julien W. on 2024-10-09 at 14:32

@lamecarlate tiens cadeau ! https://deploy-preview-764--mozilla-perfcompare.netlify.app/compare-results?baseRev=e0a1b8bc6bd28305a0b1c293ac0176599149c1ba&baseRepo=mozilla-central&newRev=02bd95b16de9ef621d6b04626d655e3a346da296&newRepo=mozilla-central&framework=12&search=memory

Les icônes de la colonne "confidence" 🙂

attention les yeux, le DOM et le CSS sont pas d'une propreté absolue 😅

=> More informations about this toot | More toots from julienw@pouet.chapril.org

Written by Lamecarlate on 2024-10-10 at 08:22

@julienw Après test rapide, vertical-align: middle sur les svg des chevrons semble arranger les choses. Ça permet que la div parente prenne la bonne taille et donc ça centre (grâce au align-items: center; de .cell). À voir comment le faire pour que ça n'impacte pas trop loin.

=> More informations about this toot | More toots from lamecarlate@pouet.it