Bagaimana untuk Memusatkan Bekas Div Tanpa Lebar Tetap?

Memusatkan Bekas Div Tanpa Lebar Tetap

Anda menghadapi cabaran untuk memusatkan blok div "produk" apabila lebarnya tidak diketahui. Berikut ialah penyelesaian kepada dilema penjajaran kandungan dinamik ini.

Pendekatannya bergantung pada gabungan dua bekas div. Div luar, dengan kelas "product_container," berfungsi sebagai bekas induk. Dalam bekas induk ini, kami menyarangkan div dalaman, memperuntukkan kelas "produk." Div dalam ini akan menempatkan kandungan produk sebenar.

Untuk meletakkan div dalam di tengah bekas induknya, kami menggunakan CSS dengan teknik kedudukan terapung dan relatif. Berikut ialah pecahan:

• Div luar, "product_container," diberi "float: right" dan diletakkan 50% dari tepi kanan menggunakan "right: 50%;" dan "kedudukan: relatif."
• Div dalam, "produk," juga "terapung: kanan" tetapi diletakkan dalam arah bertentangan dengan separuh daripada lebarnya sendiri menggunakan "kanan: -50%;" dan "kedudukan: relatif."

Kedudukan bernuansa ini memastikan bahawa div dalam berada di tengah-tengah dalam bekas induknya, tanpa mengira lebar kandungan produk.

Untuk menunjukkan teknik ini , pertimbangkan penanda HTML berikut:

<div class="product_container">
  <div class="outer-center">
    <div class="product inner-center">
      <!-- Product content goes here -->
    </div>
  </div>
  <div class="clear"></div>
</div>

Mengiringi HTML ini ialah CSS berikut:

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

Dengan memanfaatkan pendekatan div bersarang ini dan kedudukan CSS yang tepat, anda boleh memusatkan " produk" div blok walaupun lebarnya tidak diketahui, memastikan paparan kandungan yang sejajar.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Bekas Div Tanpa Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!