Bagaimana untuk Memusatkan Blok Div ​​dengan Lebar Tidak Diketahui?

Barbara Streisand
Lepaskan: 2024-11-12 22:08:02
asal
948 orang telah melayarinya

How to Center Div Blocks with Unknown Widths?

Menjajarkan Blok Div ​​Secara Berpusat dengan Lebar Tidak Diketahui

Apabila berhadapan dengan cabaran untuk memusatkan blok div tanpa lebar yang telah ditetapkan, anda mungkin mendapati diri anda sedang mencari penyelesaian. Berikut ialah penjelasan terperinci tentang pendekatan untuk menangani isu ini:

Menggunakan Margin untuk Pelarasan Lebar Automatik

Kaedah biasa melibatkan menetapkan penjajaran teks div induk ke tengah dan menggunakan sifat margin untuk div kanak-kanak. Tetapkan nilai margin: 0 auto kepada div anak, yang secara berkesan memusatkannya secara mendatar dalam bekas induk. Kata kunci auto mengarahkan penyemak imbas untuk mengagihkan ruang yang tinggal sama rata antara jidar, memastikan penjajaran yang betul.

Kod Contoh

Berikut ialah contoh pendekatan ini:

.product_container {
  text-align: center;
}

.products {
  margin: 0 auto;
}
Salin selepas log masuk

Dalam contoh ini, div product_container mempunyai penjajaran teksnya ditetapkan ke tengah, manakala setiap div produk individu di dalamnya menggunakan margin: 0 auto untuk pemusatan automatik.

Pendekatan Alternatif dengan Paparan dan Kedudukan

Pendekatan alternatif melibatkan penetapan div kanak-kanak untuk dipaparkan: inline-block dan bekas induknya untuk text-align: center. Teknik ini memusatkan div secara mendatar dalam div induk, membolehkan mereka mengecil atau mengembangkan berdasarkan kandungannya.

Kod Contoh

.child {
  display: inline-block;
}

.parent {
  text-align: center;
}
Salin selepas log masuk

Dalam pendekatan alternatif ini, div anak mempunyai paparan: blok sebaris digunakan, manakala div induk induk menjajarkannya secara berpusat.

Bekas Div Bersarang

Kaedah selanjutnya melibatkan penggunaan bekas div bersarang untuk mencapai pemusatan. Div luar diberi kedudukan: relatif dan terapung ke kanan, dengan tepi kanannya diposisikan 50% di sebelah kanan induknya. Div dalam juga diapungkan ke kanan, tetapi dengan tepi kanannya ditetapkan kepada -50%, dengan berkesan memusatkannya dalam div luar.

Kod Contoh

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}
Salin selepas log masuk

Dengan menggunakan teknik ini, anda boleh memusatkan blok div dengan berkesan tanpa mengetahui lebarnya, tanpa mengira kandungannya panjang.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Blok Div ​​dengan Lebar Tidak Diketahui?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan