bootstrap 提供四种水平居中元素的方法:使用 .text-center 类使用 justify-content 实用程序使用 margin: auto使用辅助类 .mx-auto
Bootstrap 居中显示元素
Bootstrap 提供了几种方法来水平居中显示元素:
使用 .text-center 类
- 最简单的方法是将 .text-center 类应用于要居中的元素。
- 例如:
Hello
使用 justify-content 实用程序
- 对于行内元素,可以使用 justify-content 实用程序。
- 例如,可以使用 row 类创建一个行,然后将 justify-content-center 应用于该行。内部元素会自动居中。
`
Item 1
Item 2
`
使用 margin: auto
- 对于块级元素,可以使用 margin: auto 实用程序。
- 例如:Item
使用辅助类
- Bootstrap 提供了名为 .mx-auto 的辅助类,它为元素添加 margin: auto 样式。
- 例如:Item
注意:
- 并非所有方法都适用于所有元素。
- 居中显示通常与其他样式结合使用,例如设置元素宽度或高度。
- 可以根据需要组合使用这些方法来实现所需的效果。
以上就是bootstrap如何居中显示的详细内容,更多请关注php中文网其它相关文章!
版权声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系 yyfuon@163.com