Bootstrap 4中如何達到垂直對齊？-css教學-PHP中文網

Bootstrap 4中如何達到垂直對齊？

Susan Sarandon

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

原創

1059 人瀏覽過

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

自動邊距

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中文網其他相關文章！