cari

Rumah  >  Soal Jawab  >  teks badan

Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada?

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:

<div class="cards-u">
 <a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;">
   <h3>Text Sample 1</h3> 
 </a>
 <a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;">
  <h3>Text Sample 2</h3> 
 </a>
</div>

Tetapi teks Text Sample 1Text Sample 2 tidak 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?

P粉757556355P粉757556355229 hari yang lalu809

membalas semua(1)saya akan balas

  • P粉238355860

    P粉2383558602024-04-07 16:46:48

    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%);
    
    }

    balas
    0
  • Batalbalas