J'ai le code CSS suivant, qui fait partie d'un code CSS plus large utilisé dans un site Web que je développe :
.cards-u { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .card-u { margin: 20px; padding: 20px; width: 160px; height: 160px; line-height: 120px; justify-content: center; align-items: center; text-align: center; align-self: center; flex-direction: column; border-radius: 10px; box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25); transition: all 0.2s; text-decoration: none; } .card-1-u { background: radial-gradient(#1fe4f5, #3fbafe); }
Dans le code HTML j'ai :
Mais le texteText Sample 1和Text Sample 2n'est pas centré verticalement, mais en haut de la flexbox. Il semble que quelque chose interfère dans mon gros code CSS, mais je ne sais pas quoi. Ma question est en supposant que nous ne savons pas ce qu'est le reste du CSS, pouvons-nous forcer cette partie à faire ce que nous voulons, c'est-à-dire centrer verticalement le texte dans la flexbox ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cela se produit parce que .cards-u n'a pas de hauteur définie. Il prend la hauteur du contenu comme sa propre hauteur et maintient le contenu dans cette zone.
Vous devez donner à .cards-u la hauteur complète de la page en utilisant 100vh, ou procéder comme suit :
.cards-u{ position: relative; } .card-u{ position: absolute; top: 50%; transform: translateY(-50%); }