在圖像上垂直對齊文本

Question

我知道這個問題已經問了很多，但是我還沒有在答案中找到解決方案。 我正在嘗試在圖像上居中放置文本，但是垂直對齊方式遇到了一些麻煩。 這是我的代碼：

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

和

.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}

h3.sub_category_title {
vertical-align: middle;
}

現在，文本在圖像上方水平居中，但我不知道如何在圖像中間垂直對齊文本。

提前致謝！

Answer 1

通常，如果您嘗試將一個元素與另一個元素重疊，則最終將使用position: absolute或position: relative否則，內容自然會以塊流的形式進行排列。

您可以嘗試這樣的事情：

 .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>