Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Teks Secara Menegak Dalam Div?

Bagaimana untuk Memusatkan Teks Secara Menegak Dalam Div?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-07 11:14:16789semak imbas

How to Center Text Vertically Within a 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn