如何在不設定寬度的情況下將可變寬度的 div 區塊居中？

在不設定寬度的情況下將可變寬度的Div 區塊居中

在不知道其寬度的情況下將div 區塊居中可能是一項具有挑戰性的任務。此問題通常在處理動態內容時出現，其中區塊內元素的數量和大小可能會發生變化。

解決方案1：使用Inline-Block 和Text-Align

@bobince 建議的一種方法涉及使用下列CSS 樣式：

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

在這種情況下，子div分配了內聯塊顯示屬性，而父div 的文字對齊方式設定為居中。這會導致子 div 浮動在父 div 內，自動調整其寬度以適應其內容。透過將父 div 居中，子 div 可以有效地在其容器內居中。

解決方案2：具有相對定位的巢狀Div

另一個解決方案涉及在父級內嵌套div容器：

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

在這種方法中，嵌套的div是浮動的並使用基於百分比的權利屬性進行定位。外層div設定為父容器的中點，內層div偏移自身寬度的一半，實作居中。

以上是如何在不設定寬度的情況下將可變寬度的 div 區塊居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！