I've come across this question many times, but none of the answers seem to solve my issue. My challenge is centered around aligning text on an image with regards to vertical positioning. Below is the code I'm working with:
<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="wrap">
<h3 class="sub_category_title"><a href="some link">Centered text</a></h3>
<a href="some link"><img src="some image"></a>
</div>
</div>
</div>
and
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
As it stands now, the text is horizontally aligned above the image, but I'm struggling to get it vertically centered within the image.
Your help would be greatly appreciated!