Here is my html page along 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 made some changes to the css code in an attempt to center the text within the text tags, but it doesn't seem to be working as expected...
text {
position: absolute;
font-size: small;
background: blanchedalmond;
text-align: center;
vertical-align: middle;
justify-content: center;
align-items: center;
}
Despite trying different combinations of these additional styling lines, the text is still not centered. What am I missing to achieve the desired center alignment?