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

Centering a Variable-Width Div Block Without Setting the Width

Centering a div block without knowing its width can be a challenging task. This issue typically arises when dealing with dynamic content, where the number and size of elements within the block are subject to change.

Solution 1: Using Inline-Block and Text-Align

One approach recommended by @bobince involves using the following CSS styling:

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

In this scenario, the child div is assigned an inline-block display property, while the parent div has its text alignment set to center. This causes the child div to float within the parent div, automatically adjusting its width to accommodate its content. By centering the parent div, the child div is effectively centered within its container.

Solution 2: Nested Divs with Relative Positioning

Another solution involves nesting divs within the parent container:

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

In this approach, the nested divs are floated and positioned using the percentage-based right property. The outer div is set to the midpoint of the parent container, while the inner div is offset by half of its own width to achieve centering.

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!