vertical align text on image - html

Question

I know this question has been asked a lot, but I haven't been able to find a solution among the answers. I'm trying to center a text on an image, but I'm having some trouble with the vertical alignment. This is my code:
<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">Centered text</h3>
<img src="some image">
</div>
</div>
</div>
and
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
Right now the text is horizontally centered above the image, but I can't figure out how to vertically align it in the middle of the image.
Thanks in advance!

Answer 1

Generally if you're trying to put one element overlapping another, you'll end up using position: absolute or position: relative - otherwise, the contents will naturally arrange themselves in a block flow.
You could try something like this:
.image-wrapper {
position: relative;
text-align: center;
width: 300px; /* change or remove as needed */
margin: auto;
}
.image-link { display: block; }
.image-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
/* The rest of this is just for this demo,
you can change it for your situation. */
font-weight: bold;
color: white;
font-family: sans-serif;
background: rgba(0, 0, 0, 0.5);
}
<div class="image-wrapper">
<a class="image-link" href="#">
<img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
<h3 class="image-text">A Centered Label</h3>
</a>
</div>