Background color not filling full entire row height when using my-auto-CodePudding

I have a boot-strap row where a i want the first column to have blue background and text to be centered vertically and horizontaly.

If I don't center text horizontally it works HTML

 <div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;">
    <div >
            <div >
                <div  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  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

However once I add my-auto to center tex horizontally, the background color is don't fill entire row-height, only the area of the text.

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

        <div >

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

CodePudding user response：

The contents below is based on Bootstrap 5 (but also working fine on Bootstrap 4).

I don't use my-auto but add justify-content-center align-items-center d-flex instead. The text-center is no need either.

<div class = "shadow p-3 mb-5 bg-white rounded" style="padding: 0 !important;" dir="rtl">
    <div >
            <div >
                <div  style="">
                        <i ></i>
                        <span >תיסת הלוך</span>
                </div>
                <div  style="">
                <span>טיסה מספר:</span><br>
                <span style="font-size: x-large;font-weight: bold;text-align: center">22</span>
                </div>
            </div>
        </div>
</div>

See it in action 1, 2.

Don't just copy and paste because I was modified your HTML to be able to run via jsfiddle.

If you use my-auto the browser will be wrap that element to its actual height and then set margin top & bottom to automatically. With that, you can't have full element height and align text into vertically middle.

CodePudding user response：

Solved it like this

<div  style="padding: 0 !important;">
            <div >
                <div >
                    <div >
                    <div >
                        <div  style="">
                        <div >
                            <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  style="line-height: 1">
                         <div >
                        <span>טיסה מספר:</span><BR>
                        <span style="font-size: x-large;font-weight: bold;text-align: center;"><?= $rowData->outTrip->airline . ' ' . $rowData->outTrip->flightNmr ?></span>
                         </div>
                    </div>