首页 > web前端 > css教程 > 正文

为什么 `margin: auto;` 不居中内联块元素?

Mary-Kate Olsen
发布: 2024-10-25 11:01:30
原创
178 人浏览过

Why Doesn't `margin: auto;` Center Inline-Block Elements?

边距:自动;不适用于内联块元素

当涉及自动边距时,内联块元素的行为与块元素不同。在块元素中,margin:auto;元素在其父容器内水平居中。但是,在内联块元素中,margin:auto;没有效果。

示例:

<code class="css">#container {
    border: 1px solid black;
    display: inline-block;
    padding: 50px;
}</code>
登录后复制

在此示例中,容器元素设置为 inline-block。当保证金:自动时;应用于元素,它不会将容器在其父容器中居中。

解决方案:

要使内联块元素居中,您可以使用 text- align:以父元素为中心。

<code class="css">.center {
    text-align: center;
}</code>
登录后复制
<code class="html"><div class="center">
    <div class="MtopBig" id="container"></div>
</div></code>
登录后复制

现在,容器元素将在中心 div 内水平居中。

以上是为什么 `margin: auto;` 不居中内联块元素?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!