垂直对齐

垂直对齐-Bootstrap 5和Material Design 2.0

用于垂直对齐的Flexbox实用程序。

注意：有关高级用法，请阅读我们的 Flexbox文档。

垂直和水平

将 .d-flex 添加到父元素以启用弹性模式。然后使用（也在父元素） .align-items-center 垂直对齐内容， .justify-content-center 可以水平对齐内容。

HTML


          <div
            class="border d-flex align-items-center justify-content-center"
            style="height: 350px;"
          >
            <button type="button" class="btn btn-primary">Example button</button>
          </div>

仅垂直

将 .d-flex 添加到父元素以启用弹性模式。然后使用（也在父元素） .align-items-center 垂直对齐内容

HTML


          <div class="border d-flex align-items-center" style="height: 350px;">
            <button type="button" class="btn btn-primary">Example button</button>
          </div>

Flexbox选项

在flexbox容器上使用 align-items 实用程序来更改flex的对齐方式横轴上的项目（开始的y轴，如果 flex-direction：column ，则为x轴）。从开始，结束， center ，基线，或 stretch （浏览器默认）。

Flex item

HTML


          <div class="d-flex align-items-start">...</div>
          <div class="d-flex align-items-end">...</div>
          <div class="d-flex align-items-center">...</div>
          <div class="d-flex align-items-baseline">...</div>
          <div class="d-flex align-items-stretch">...</div>

还存在 align-items 的响应变体。

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch