如何在 Bootstrap 4 中垂直居中內容？

Bootstrap 4 中的垂直對齊

問題介紹

在 Bootstrap 4 中，某些元素的垂直對齊可能具有挑戰性。嘗試將一行中的內容垂直居中時會出現一個常見的困難，特別是包含文字「Supplier」的元素。

解決方案概述

Bootstrap 4 引入了多種垂直對齊方法，包括 Flexbox 實用程式、自動邊距和顯示實用程式。

Flexbox方法

Bootstrap 4 Alpha 5 及更早版本：

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

Bootstrap 4 穩定版：

<div class="row">
    <div class="col-sm-12 align-self-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Bootstrap 4 Flexbox 作者：預設值：

自動邊距方法

<div class="row">
    <div class="col-sm-12 d-flex align-items-center justify-content-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

顯示實用程式方法

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

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

顯示實用程式方法

顯示實用程式方法顯示實用程式方法>結論這些方法提供了各種Bootstrap 4 中垂直對齊元素的選項。請記住選擇最適合您的特定要求的方法以及瀏覽器相容性考慮因素。

以上是如何在 Bootstrap 4 中垂直居中內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！