Bagaimanakah Saya Mendatar Memusatkan Elemen Div dalam CSS?-tutorial css-php.cn

How Do I Horizontally Center a Div Element in CSS?

Menguasai Pemusatan Mendatar untuk

Elemen dengan CSS

Bayangkan halaman yang dihiasi dengan

elemen yang terapung dengan tenang di tengahnya, mempamerkan kandungannya dalam penjajaran sempurna dengan teks sekeliling. Bagaimanakah anda dengan mudah mencapai ini dengan CSS? Mari kita rungkai pendekatan paling mudah untuk kedua-dua tetap dan lebar boleh ubah

elemen.

Lebar Tetap

Untuk

dihiasi dengan lebar yang telah ditetapkan, sifar pada tengahnya adalah mudah dengan arahan CSS berikut:

#yourdiv {
  margin: 0 auto;
  width: 400px; /* Set the desired width */
}

Salin selepas log masuk

Lebar Pembolehubah

Apabila berhadapan dengan a

yang lebarnya mungkin berubah-ubah, taktik licik muncul:

#wrapper {
  text-align: center;
}

#yourdiv {
  display: inline-block;
}

Salin selepas log masuk

Susunan ini memastikan bahawa elemen memusatkan kandungannya, termasuk yang sangat misteri. Oleh itu, tanpa mengira panjang kandungan,

mendapat tempat yang sepatutnya di tengah-tengah halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Mendatar Memusatkan Elemen Div dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel sebelumnya：Bagaimana untuk Menjadikan Warna Latar Belakang Lutsinar Sambil Mengekalkan Teks Legap? Artikel seterusnya：Bagaimana untuk Memaksa DOM Redraw/Refresh dalam Chrome untuk Mac?

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

2702

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

2822

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

2382

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