Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menjajarkan Div secara menegak dalam Sel Jadual?

Bagaimana untuk Menjajarkan Div secara menegak dalam Sel Jadual?

Mary-Kate Olsenasal: 2024-12-07 08:20:14251semak imbas

How to Vertically Align a Div within a Table Cell?

Cara Menjajarkan

Elemen dalam Sel

Dalam kod HTML anda, anda mempunyai jadual dengan dua sel, setiap satu mengandungi

unsur. Anda mahu meletakkan

elemen untuk mengisi ketinggian sel yang sepadan.

Untuk mencapai ini, anda boleh menggunakan kaedah berikut:

Tetapkan Ketinggian untuk Elemen: Tetapkan ketinggian tertentu pada sel. Ini akan menyediakan titik rujukan tetap untuk
elemen untuk mengira ketinggiannya. Contohnya:

td {
  height: 200px; /* Replace with the desired height */
}

Gunakan Ketinggian Berasaskan Peratusan untuk
Elemen: Daripada menetapkan ketinggian mutlak, anda boleh menggunakan ketinggian berasaskan peratusan untuk
elemen. Ini akan memastikan bahawa mereka mengisi ketinggian yang tersedia dalam sel. Contohnya:

div {
  height: 100%;
}

Tambah Sifat Penjajaran Menegak: Untuk memusatkan
elemen menegak dalam sel, anda boleh menggunakan sifat CSS seperti penjajaran menegak. Contohnya:

div {
  vertical-align: middle;
}

Pendekatan ini harus membenarkan

elemen untuk mengisi ketinggian sel sambil memastikan penjajaran menegaknya.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Div secara menegak dalam Sel Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for while this position table td

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

Artikel sebelumnya：Mengapa Pemilih `:huruf pertama` CSS Saya Tidak Berfungsi pada Elemen Span?Artikel seterusnya：Mengapa Pemilih `:huruf pertama` CSS Saya Tidak Berfungsi pada Elemen Span?

Artikel berkaitan

Lihat lagi