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