Bootstrap 欄位垂直居中

版本:4.3.1

方法一、align-items-center

bootstrap 4 column vertical align center
bootstrap 4 column vertical align center

於父層使用 align-items-center 這對我來說是有效的,代碼如下:

<div class="container border text-center">
    <div class="row align-items-center" >
        <div class="col-4 my-0">
            Hello
        </div>
        <div class="col-4 my-0">
            Hello<br>
            Hello<br>
            Hello
        </div>
        <div class="col-4 my-0">
            Hello
        </div>
    </div>
</div>

參考:https://stackoverflow.com/a/44801382/6784662

方法二、d-flex

與方法一出來的結果一樣、不過方法二不需要依賴父容器,代碼如下:

<div class="container border">
    <div class="row" >
        <div class="col d-flex align-items-center justify-content-center">
            Hello
        </div>
        <div class="col d-flex align-items-center justify-content-center">
            Hello<br>
            Hello<br>
            Hello
        </div>
        <div class="col d-flex align-items-center justify-content-center">
            Hello
        </div>
    </div>
</div>

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

READ  bootstrap 4 datepicker + 產生器 ( 支援中文 )

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料