Bagaimana untuk Memusatkan Blok Div ​​Lebar Boleh Ubah Tanpa Menetapkan Lebar?

Memusatkan Blok Div ​​Lebar Boleh Ubah Tanpa Menetapkan Lebar

Memusatkan blok div tanpa mengetahui lebarnya boleh menjadi tugas yang mencabar. Isu ini lazimnya timbul apabila berurusan dengan kandungan dinamik, di mana bilangan dan saiz elemen dalam blok tertakluk kepada perubahan.

Penyelesaian 1: Menggunakan Blok Sebaris dan Jajarkan Teks

Satu pendekatan yang disyorkan oleh @bobince melibatkan penggunaan penggayaan CSS berikut:

.child {
  display: inline-block;
}
.parent {
  text-align: center;
}

Dalam senario ini, div kanak-kanak diberikan sifat paparan blok sebaris, manakala div induk mempunyai penjajaran teksnya ditetapkan ke tengah. Ini menyebabkan div kanak-kanak terapung dalam div induk, melaraskan lebarnya secara automatik untuk menampung kandungannya. Dengan memusatkan div induk, div anak dipusatkan dengan berkesan dalam bekasnya.

Penyelesaian 2: Div Bersarang dengan Kedudukan Relatif

Penyelesaian lain melibatkan div bersarang dalam induk bekas:

<div class="product_container">
  <div class="outer-center">
    <div class="product inner-center">
    </div>
  </div>
  <div class="clear"></div>
</div>

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

Dalam pendekatan ini, div bersarang diapungkan dan diletakkan menggunakan sifat hak berasaskan peratusan. Div luar ditetapkan pada titik tengah bekas induk, manakala div dalam diimbangi separuh daripada lebarnya sendiri untuk mencapai pemusatan.

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