Align text center in a vertical group over an image

Issue

I have an html page as follows, with its corresponding css code:

<div class="container">
    <div class="row mt-4">

      <div class="col-sm-8">
        <h2>blah blah</h2>
        <p>blah blah</p>
      </div>

      <div class="col-sm-4">

        <h2>Contact Us</h2>

        <address>
          <strong>blah blah</strong>
        </address>
        
        <div class="row">

          <div class="col-6 col-sm-12 col-md-8">
            <a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/home/">
              <img src="media/logos/blah.png" class="img-fluid mb-2">
            </a>
          </div>
         
          <div class="col-6 col-sm-12 col-md-8">
            <text>Sponsored by:</text>
            <a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/">            
              <img src="media/logos/blah.png" class="img-fluid mb-2">
            </a>
          </div>

        </div>
      </div>

    </div>
</div>

---

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;
}

---

I changed my css code to the following, to make sure the text between the text tags centers in the middle, but there is no effect whatsoever...

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;

  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
}

None of these four added lines alone or in a combo do the trick. What am I doing wrong that the text does not justify in the center?

Solution

You can give properties like display: inline-flex, align-items: center to the parent so it will always keep them in center of each other.

Like this:

text {
  position: absolute;
  font-size: small;
  background: blanchedalmond;
}

.parent-div {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

<div class="container">
  <div class="row mt-4">

    <div class="col-sm-8">
      <h2>blah blah</h2>
      <p>blah blah</p>
    </div>

    <div class="col-sm-4">

      <h2>Contact Us</h2>

      <address>
          <strong>blah blah</strong>
        </address>

      <div class="row">

        <div class="col-6 col-sm-12 col-md-8">
          <a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/home/">
            <img src="https://i.picsum.photos/id/387/536/354.jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" class="img-fluid mb-2">
          </a>
        </div>

        <div class="col-6 col-sm-12 col-md-8 parent-div">
          <text>Sponsored by:</text>
          <a target="_blank" rel="noopener noreferrer" href="https://www.blahblah/">
            <img src="https://i.picsum.photos/id/387/536/354.jpg?hmac=Zs1KZbc0jXe2zZP7yKL_OrUKxdUVFH0LqLoegVZnIuA" class="img-fluid mb-2">
          </a>
        </div>

      </div>
    </div>

  </div>
</div>

Working Fiddle

Answered By - Ahmad Habib