Text-center not working with background image: Bootstrap4

Question

Texts were aligned to the center but alignment doesn't working as I added the background image.

<header class="bg-image">
    <div class="container px-4 px-lg-5">
        <div class="text-center text-white position-absolute">
            <h1 class="display-4 fw-bolder">Text</h1>
        </div>
    </div>
    <img class="bg-image" src="..."
     style="width: 100%; height: 450px; object-fit: cover; object-position: 0 20%;">
</header>

header.html I tried justify-content-center but it still didn't work. How can I get them aligned?

Answer 1

I think if you add position:relative to header and position:absolute to container will do what you want sth like this:

Texts were aligned to the center but alignment doesn't working as I added the background image.

    <header class="bg-image" style="position:relative">
        <div class="container px-4 px-lg-5 text-center text-white position-absolute" style="display:flex;width:100%;height:100%;justify-content:center;align-items:center">
           <h1 class="display-4 fw-bolder">Text</h1>
        </div>
        <img class="bg-image" src="..."
         style="width: 100%; height: 450px; object-fit: cover; object-position: 0 20%;">
    </header>