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

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

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

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

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!