Align text center in a vertical group over an image-CodePudding

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?

CodePudding user response：

The first 2 properties are for text placement on a line.

text-align: center;
vertical-align: middle;

text-align, sets the placement horizontally on the line, so if the container is 100% wide it will end in the center.

vertical-align is text placement vertically on the text line. So to make it center of your image, then the line-height should be the same as your image.

justify-content: center;
align-items: center;

Are used together with flexbox display:flex. You need to also use position: relative and absolute to place the elements ontop each other.

.image-conatiner {
position:relative;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

display: flex;
justify-content: center;
align-items: center;
}

CodePudding user response：

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