首页 > web前端 > css教程 > 为什么我的 div 不在包含的 div 内水平居中?

为什么我的 div 不在包含的 div 内水平居中?

Linda Hamilton
发布: 2024-11-02 17:44:29
原创
495 人浏览过

Why do my divs not center horizontally within the containing 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板