如何在容器内水平居中 Div？

容器内 Div 的水平对齐

当尝试将容器内的 div 水平居中时，可能会遇到困难。这通常是由于 float: left 的默认行为造成的。

要解决此问题，请考虑使用 display: inline-block 而不是 div 的 float。这种技术消除了手动计算边距的需要，并允许响应式对齐。

例如，在以下 CSS 中：

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

类为“block”的 div 将表现为内联元素将在容器 div 中水平对齐，类为“row”。

此外，对于只有一个块 div 的行 div 的情况，您可以使用 text-align: center 将其居中：

<code class="css">.row-with-single-block {
  text-align: center;
}</code>

以上是如何在容器内水平居中 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！