Bootstrap 4中如何实现垂直对齐？-css教程-PHP中文网

Bootstrap 4中如何实现垂直对齐？

Susan Sarandon

发布： 2024-11-23 04:14:19

原创

1058 人浏览过

How to Achieve Vertical Alignment in Bootstrap 4?

Bootstrap 4 中的垂直对齐

在 Bootstrap 4 中对齐诸如文本元素之类的元素可能会令人沮丧。通常，text-align 实用程序只能用于水平对齐，并且大多数垂直对齐技术通常是通过添加其他标记并覆盖默认样式来实现的。

flex-xs-middle 类

旧版本的 Bootstrap（例如 Bootstrap 3 和早期版本的 Bootstrap 4）使用 flex-xs-middle 类来垂直居中元素。此类可以添加到容器以使用 flexbox 对其内容进行垂直居中：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

登录后复制

Bootstrap 4.0.0 更新

从 Bootstrap 4.0.0 开始，flexbox 成为默认设置。因此，现在可以通过使用多种方法来垂直对齐元素：

自动边距

my-auto 实用程序可以用于自动垂直居中元素，例如：

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

登录后复制

flexbox

flexbox 实用程序，例如 align-self-center，可以用于对齐单列或整个行中的所有列，例如：

<div class="row">
    <div class="col-6 align-self-center">
        <div class="card card-block">Center</div>
    </div>
    <div class="col-6">
        <div class="card card-inverse card-danger">Taller</div>
    </div>
</div>

登录后复制

显示实用程序

Bootstrap 4 还附带了一组显示实用程序，可以用作垂直对齐另一种选择，例如：

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">I am centered vertically</div>
    </div>
</div>

登录后复制

以上是Bootstrap 4中如何实现垂直对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！