Bagaimana untuk Menjajarkan Teks Secara Menegak Dalam Bekas Flexbox Tanpa Pembalut?

Penjajaran Teks Menegak Dalam Bekas Flexbox

Penjajaran menegak kandungan dalam susun atur flexbox mungkin mencabar. Begini cara untuk mencapainya tanpa menggunakan elemen pembalut tambahan.

Dalam contoh anda, isunya terletak pada penggunaan align-self: center pada

unsur. Sebaliknya, gunakan align-item: tengah pada induk

unsur. Ini akan menjajarkan elemen anak
• secara menegak dalam bekas flexbox.

  Berikut ialah kod yang dikemas kini:

  ul {
    height: 100%;
  }
  
  li {
    display: flex;
    justify-content: center;
    align-items: center;  /* Updated this line */
    background: silver;
    width: 100%;
    height: 20%;
  }

  Penjelasan:

  • align-self terpakai pada item flex individu dan mengawal penjajarannya. Walau bagaimanapun, dalam kes anda,
  • bukan item fleksibel kerana induknya,
    , tidak mempunyai paparan: flex digunakan.
    • item jajar mengawal penjajaran item fleksibel dalam bekas fleksibelnya. Sejak
    • ialah bekas lentur, align-item: tengah secara efektif memusatkan elemen secara menegak di dalam
    • .
    • Mengalih keluar align-self: tengah dari
    • adalah penting, kerana ia akan mengatasi penjajaran menegak yang ditentukan oleh item penjajaran.

    Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Teks Secara Menegak Dalam Bekas Flexbox Tanpa Pembalut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!