如何使沒有固定寬度的 Div 容器居中？

將沒有固定寬度的 Div 容器居中

當寬度未知時，您面臨著將「產品」div 區塊居中的挑戰。這是解決這種動態內容對齊困境的解決方案。

此方法依賴兩個 div 容器的組合。具有“product_container”類別的外部 div 用作父容器。在這個父容器中，我們嵌套了一個內部 div，並分配了「產品」類別。這個內部 div 將容納實際的產品內容。

為了將內部 div 定位在其父容器的中心，我們使用了具有浮動和相對定位技術的 CSS。細分如下：

• 外部 div“product_container”被賦予“float: right”，並使用“right: 50%;”定位在距右邊緣 50% 的位置。
• 內部 div“products”也是“float: right”，但使用“right: -50%;”以相反方向定位其自身寬度的一半。和「位置：相對。」

這種細緻入微的定位可確保內部 div 在其父容器內居中，無論產品內容的寬度如何。

示範此技術，考慮以下HTML 標記：

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

伴隨此HTML 的是以下內容CSS：

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

透過利用這種巢狀div 方法和精確的CSS 定位，即使「產品」div 區塊的寬度未知，您也可以有效地將其居中，從而確保內容顯示良好對齊。

以上是如何使沒有固定寬度的 Div 容器居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！