水平对齐

水平对齐-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>

中央按钮

与上面相同，将 .text-center 添加到按钮的父元素中，以 居中。


          <div class="text-center">
            <button type="button" class="btn btn-primary">Primary</button>
          </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