水平对齐
水平对齐-Bootstrap 5和Material Design 2.0
用于水平对齐的实用程序。
注意:有关高级用法,请阅读我们的 Flexbox文档。
中心文字
要使文本居中,请将 .text-center
类添加到父元素
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa reiciendis sit dolorum aut aperiam a architecto. Fuga, sit.
<div class="text-center">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic
delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa
reiciendis sit dolorum aut aperiam a architecto. Fuga, sit.
</p>
</div>
中心图片
您还可以通过将 .text-center
类添加到图像的居中位置来使图像居中
父元素。

<div class="text-center">
<img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" class="img-fluid" alt="" />
</div>
中心列
通过使用flexbox,您可以将网格的整个列居中。
This is a row
This column (.col-md-6) is centered
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-md-6">
This column is centered
</div>
<!--Grid column-->
</div>
<!--Grid row-->
Flexbox选项
在flexbox容器上使用 justify-content
实用程序来更改
弯曲主轴上的项目(以x轴为起点,以y轴为起点
flex-direction:column
)。从 start
(浏览器默认)中选择,
end
, center
, ween
, around
或
均匀
。
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
justify-content
的响应形式也存在。
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly