使用my-auto時背景顏色未填滿整個行高

我有一個引導行，我希望第一列有藍色背景，文本垂直和水平居中。

如果我不水平居中文本，它可以作業 HTML

 <div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;">
    <div class="container">
            <div class="row main-row">
                <div class="col-2 booking-flight-info-dir text-center   " style="">
                        <img  src="<?= plugin_dir_url( __DIR__ ).'/img/out_flight_icon.png'?>" alt="out_flight_icon.png" style="padding-left:10px " >
                        <span >???? ????</span>
                </div>
                <div class="col-2 booking-flight-info-flightnum text-center  my-auto" style="">
                <span>???? ????:</span><BR>
                <span style="font-size: x-large;font-weight: bold;text-align: center"><?= $rowData->outTrip->flightNmr?></span>
                </div>
            </div>
        </div>
</div>

沒有我的汽車

但是，一旦我將 my-auto 添加到水平居中的 tex 中，背景顏色就不會填充整個行高，只會填充文本區域。

<div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;">
<div class="container">

        <div class="row main-row">

            <div class="col-2 booking-flight-info-dir text-center my-auto " style="">
                    <img  src="<?= plugin_dir_url( __DIR__ ).'/img/out_flight_icon.png'?>" alt="out_flight_icon.png" style="padding-left:10px " >
                    <span >???? ????</span>
            </div>

            <div class="col-2 booking-flight-info-flightnum text-center  my-auto" style="">
            <span>???? ????:</span><BR>
            <span style="font-size: x-large;font-weight: bold;text-align: center"><?= $rowData->outTrip->flightNmr?></span>
            </div>
        </div>

    </div>


</div>

與我的汽車

uj5u.com熱心網友回復：

以下內容基于 Bootstrap 5（但在 Bootstrap 4 上也可以正常作業）。

我不使用my-auto而是添加justify-content-center align-items-center d-flex。text-center也沒有必要。

<div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;" dir="rtl">
    <div class="container">
            <div class="row main-row">
                <div class="col-2 booking-flight-info-dir justify-content-center align-items-center d-flex" style="">
                        <i class="fas fa-plane"></i>
                        <span >???? ????</span>
                </div>
                <div class="col-2 booking-flight-info-flightnum text-center  my-auto" style="">
                <span>???? ????:</span><br>
                <span style="font-size: x-large;font-weight: bold;text-align: center">22</span>
                </div>
            </div>
        </div>
</div>

在行動1和2中看到它。

不要只是復制和粘貼，因為我修改了您的 HTML 以便能夠通過 jsfiddle 運行。

如果您使用my-auto瀏覽器，則會將該元素包裝到其實際高度，然后將邊距頂部和底部設定為自動。這樣，您就不能擁有完整的元素高度并將文本垂直居中對齊。

uj5u.com熱心網友回復：

像這樣解決了

<div class="shadow p-3 mb-2 bg-white rounded" style="padding: 0 !important;">
            <div class="card">
                <div class="row main-row  ">
                    <div class="col-md-4">
                    <div class="row flight-num-row h-100 ">
                        <div class="col booking-flight-info-dir text-center d-table" style="">
                        <div class="d-table-cell align-middle">
                            <img src="<?= plugin_dir_url(__DIR__) . '/img/out_flight_icon.png' ?>" alt="out_flight_icon.png"
                                 style="padding-left:10px ">
                            <span>???? ????</span>
                        </div>
                    </div>

                    <div class="col booking-flight-info-flightnum text-center   d-table" style="line-height: 1">
                         <div class="d-table-cell align-middle">
                        <span>???? ????:</span><BR>
                        <span style="font-size: x-large;font-weight: bold;text-align: center;"><?= $rowData->outTrip->airline . ' ' . $rowData->outTrip->flightNmr ?></span>
                         </div>
                    </div>

標籤：

上一篇：如何使用ng-forms顯示當前時間

下一篇：Matlab輸入陳述句