bootstrap 中实现居中的方法如下:水平居中:文本:添加 .text-center 类块元素:添加 .mx-auto 类垂直居中:行内元素:添加 .align-self-center 类块元素:使用 d-flex 和 .align-items-center 类使用 vh-100 和 .align-content-center 类
在 Bootstrap 中实现居中:水平和垂直
什么是居中?
居中是指将元素水平或垂直地放置在其容器的正中央。在 Web 设计中,居中元素可以增强视觉吸引力并创建平衡感。
使用 bootstrap 实现水平居中
水平居中文本:
- 添加 .text-center 类到文本容器
水平居中块元素:
使用 Bootstrap 实现垂直居中
垂直居中行内元素:
- 添加 .align-self-center 类到行内元素
垂直居中块元素:
- 添加 .d-flex 类到容器,再添加 .align-items-center 类到块元素
或 - 添加 .vh-100 类到容器,再添加 .align-content-center 类到块元素,并为块元素设置最小高度
示例:
<!-- 水平居中文本 --> <p class="text-center">居中的文本</p> <!-- 水平居中块元素 --> <div class="mx-auto" style="width: 200px; height: 100px;">居中的块元素</div> <!-- 垂直居中行内元素 --> <div class="d-flex justify-content-center"> <span class="align-self-center">居中的行内元素</span> </div> <!-- 垂直居中块元素(使用 d-flex) --> <div class="d-flex flex-column vh-100 align-items-center"> <div style="width: 200px; height: 100px;">居中的块元素</div> </div> <!-- 垂直居中块元素(使用 vh-100) --> <div class="vh-100"> <div class="align-content-center" style="height: 100px;">居中的块元素</div> </div>