首页 >web前端 >css教程 >如何在 CSS 中仅使用'display: inline-block”将块元素居中?

如何在 CSS 中仅使用'display: inline-block”将块元素居中?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-27 03:24:10675浏览

How Can I Center a Block Element Using Only `display: inline-block` in CSS?

CSS 中的内联块居中显示

在给定的代码中,正文文本使用 text-align: center 居中对齐。 .wrap 类以前使用 display: table 进行对齐,现在使用 display: inline-block。与使用类似表格的显示相比,这可以实现更灵活的布局。

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

通过这些更改,.wrap 元素保持与页面中心对齐,同时允许其中的内容流动自然地,就好像它是内联文本的一部分一样。这种方法消除了额外的 display: table 规则的需要,从而产生更加精简和通用的 CSS 代码。

以上是如何在 CSS 中仅使用'display: inline-block”将块元素居中?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn