Bagaimana untuk Menjajarkan Teks Secara Menegak Dalam Div?-tutorial css-php.cn

Bagaimana untuk Menjajarkan Teks Secara Menegak Dalam Div?

DDD

Lepaskan： 2024-12-19 00:41:10

asal

663 orang telah melayarinya

How to Vertically Align Text Within a Div?

Penjajaran Menegak Teks dalam

Dalam pembangunan web, selalunya perlu untuk menjajarkan teks secara menegak dalam < div> unsur. Untuk mencapai matlamat ini terdapat beberapa penyelesaian yang tersedia.

Menggunakan Line-Height:

Satu kaedah mudah ialah menggunakan sifat line-height. Dengan menetapkan ketinggian garisan kepada nilai yang sama dengan ketinggian

, teks akan dijajarkan secara automatik secara menegak di tengah.

Contoh:

#abc {
  line-height: 50px;
}

Salin selepas log masuk

Nota: Kaedah ini hanya berfungsi jika terdapat satu baris teks dalam

Menggunakan Paparan: Jadual dan Paparan: Table-Cell:

Untuk berbilang baris teks, penyelesaian yang lebih serba boleh melibatkan penggunaan paparan: jadual dan paparan: sifat sel jadual. Kaedah ini melibatkan pembalut teks dalam dan paparan tetapan: sel jadual dan penjajaran menegak: tengah.

Contoh:

#abc {
  display: table;
}

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

Salin selepas log masuk

Menggunakan Transform Property:

Alternatif lain ialah menggunakan sifat transform dengan fungsi translateY(). Ini melibatkan menetapkan kedudukan elemen kepada mutlak, meletakkannya 50% dari atas dan menterjemahkannya daripada paksinya dengan -50%.

Contoh:

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

Salin selepas log masuk

Nota: Kaedah ini mungkin tidak disokong oleh pelayar lama seperti IE8.

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

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Memusatkan DIV Secara Mendatar dan Menegak Tanpa Menggunting Kandungan? Artikel seterusnya：Sekiranya Anda Mengelakkan Pemilih Bintang CSS untuk Prestasi dan Kebolehselenggaraan yang Lebih Baik?

Kenyataan Laman Web ini

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

Artikel terbaru oleh pengarang