使用 my-auto 时背景颜色未填满整个行高

Question

我有一个引导行，我希望第一列有蓝色背景，文本垂直和水平居中。

如果我不水平居中文本，它可以工作 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>

without my-auto

但是，一旦我将 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>

with my-auto

Answer 1

以下内容基于 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，浏览器会将该元素包装到它的实际高度，然后将顶部和底部边距设置为自动。这样一来，您就不能拥有完整的元素高度并将文本垂直居中对齐。

Answer 2

这样解决

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