使用 my-auto 时背景颜色未填满整个行高
Background color not filling full entire row height when using 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>
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
以下内容基于 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>
不要只是复制和粘贴,因为我修改了你的 HTML 以便能够 运行 通过 jsfiddle。
如果您使用 my-auto
,浏览器会将该元素包裹到其实际高度,然后自动设置边距顶部和底部。这样一来,您就无法拥有完整的元素高度并将文本垂直居中对齐。
这样解决了
<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>
我有一个引导行,我希望第一列有蓝色背景,文本垂直和水平居中。
如果我不将文本水平居中,它就可以工作 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
以下内容基于 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>
不要只是复制和粘贴,因为我修改了你的 HTML 以便能够 运行 通过 jsfiddle。
如果您使用 my-auto
,浏览器会将该元素包裹到其实际高度,然后自动设置边距顶部和底部。这样一来,您就无法拥有完整的元素高度并将文本垂直居中对齐。
这样解决了
<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>