垂直对齐

垂直对齐-Bootstrap 5和Material Design 2.0

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

注意:有关高级用法,请阅读我们的 Flexbox文档


垂直和水平

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


          <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 垂直对齐内容


          <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
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 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