Saya mempunyai kod CSS berikut, yang merupakan sebahagian daripada kod CSS yang lebih besar yang digunakan dalam tapak web yang saya bangunkan:
.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); }
Dalam kod HTML saya ada:
Tetapi teksText Sample 1和Text Sample 2tidak berpusat secara menegak, tetapi di bahagian atas kotak fleksibel. Nampaknya sesuatu dalam kod CSS besar saya mengganggu, tetapi saya tidak tahu apa. Soalan saya adalah dengan mengandaikan kita tidak tahu apakah CSS yang lain, bolehkah kita memaksa bahagian ini untuk melakukan apa yang kita mahu, iaitu memusatkan teks secara menegak dalam flexbox?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini berlaku kerana .cards-u tidak mempunyai sebarang ketinggian yang ditentukan. Ia mengambil ketinggian kandungan sebagai ketinggiannya sendiri dan mengekalkan kandungan dalam kawasan itu.
Anda harus memberi .cards-u ketinggian halaman penuh menggunakan 100vh, atau lakukan perkara berikut:
.cards-u{ position: relative; } .card-u{ position: absolute; top: 50%; transform: translateY(-50%); }