masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

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 Olsen

Lepaskan： 2024-12-07 08:20:14

asal

208 orang telah melayarinya

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 */
}

Salin selepas log masuk

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%;
}

Salin selepas log masuk

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

div {
  vertical-align: middle;
}

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Mengapa Pemilih `:huruf pertama` CSS Saya Tidak Berfungsi pada Elemen Span? Artikel seterusnya：Bagaimana untuk Mengalih Keluar Gaya CSS Dinamik Ditambah dengan .css() jQuery?

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

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2171

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2322

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1957

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1834

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1883

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan