Bagaimana untuk Memusatkan Teks Secara Menegak Dalam Div?

Cara Menjajarkan Teks Secara Menegak dalam Div

Apabila bekerja dengan div, kadangkala perlu memastikan teks di dalamnya diselaraskan menegak di tengah. Ini boleh dicapai melalui pelbagai kaedah.

Menggunakan ketinggian garis

Jika div mempunyai ketinggian tetap, seperti 50px, anda boleh menggunakan ketinggian garisan Sifat CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Ini akan memusatkan teks secara menegak dalam div.

Menggunakan sifat paparan

Untuk teks berbilang baris, anda boleh membalutnya dalam elemen span dan menggunakan sifat paparan dan penjajaran menegak.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Menggunakan sifat transformasi

Kaedah lain melibatkan penggunaan sifat transformasi dengan fungsi translateY(). Ini amat berguna untuk penyemak imbas lama yang tidak menyokong sifat paparan.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Teks Secara Menegak Dalam Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!