為什麼我的 div 不在包含的 div 內水平居中？

水平居中 DIV 對齊

您遇到了 div 無法在包含的 div 內水平對齊的問題。以下是常見的查詢和解決方案：

問題

為什麼我的 div 不在包含的 div 內水平居中？

範例HTML：

<code class="html"><div class="row">
  <div class="block">Lorem</div>
  <div class="block">Ipsum</div>
  <div class="block">Dolor</div>
</div></code>

CSS 範例：

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  float: left;
}</code>

解

要實現水平居中，請考慮使用display: inline- block 而不是float。此方法使 div 的行為類似於內聯元素，同時保持區塊級屬性，例如寬度和高度。

更新的 CSS：

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>

透過此修改，您的 div 應該在包含 div。

以上是為什麼我的 div 不在包含的 div 內水平居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！