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

Question

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?

Answer 1

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

Answer 2

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;
}