bootstrap如何居中显示

Bootstrap 提供四种水平居中元素的方法：使用 .text-center 类使用 justify-content 实用程序使用 margin: auto使用辅助类 .mx-auto

Bootstrap 居中显示元素

Bootstrap 提供了几种方法来水平居中显示元素：

使用 .text-center 类

• 最简单的方法是将 .text-center 类应用于要居中的元素。
• 例如：<p class="text-center">Hello</p>

使用 justify-content 实用程序

• 对于行内元素，可以使用 justify-content 实用程序。
• 例如，可以使用 row 类创建一个行，然后将 justify-content-center 应用于该行。内部元素会自动居中。

`

Item 1

Item 2

`

使用 margin: auto

• 对于块级元素，可以使用 margin: auto 实用程序。
• 例如：<div style="margin: auto;">Item</div>

使用辅助类

• Bootstrap 提供了名为 .mx-auto 的辅助类，它为元素添加 margin: auto 样式。
• 例如：<div class="mx-auto">Item</div>

注意：

• 并非所有方法都适用于所有元素。
• 居中显示通常与其他样式结合使用，例如设置元素宽度或高度。
• 可以根据需要组合使用这些方法来实现所需的效果。

以上是bootstrap如何居中显示的详细内容。更多信息请关注PHP中文网其他相关文章！