在图像上垂直对齐文本

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

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>