將標頭垂直居中放置在圖像頂部

Question

我試圖將h2在img上垂直居中，但我無法使其居中。 我快要到那里了，但是我如何才能准確地到達那里呢？

細節：

• 我不知道任何元素的高度，所以我不能使用固定的高度，並且將圖像設置為背景不是一種選擇，因為圖像是內容的一部分
• 有人建議使用display:table ，但是我已經嘗試過了，但它與position:relative和position:absolute搭配效果position:absolute

的HTML

<div class="image">
    <img src="http://bit.ly/gUKbAE" />
    <div class="wrapper">
        <h2>Title</h2>   
    </div>
</div>

的CSS

.image { 
    position: relative; 
}

.wrapper {
    position: absolute;
    top: 50%; 
    left: 0;
}

h2 {
    margin: 0;
    padding: 0;
}

我把它放在這里： http : //jsfiddle.net/kmjRu/15/

Answer 1

它之所以不能居中，是因為它使文本行的top占50% 。

簡單的解決方法是將line-height更改為0px ：

.wrapper
{
   position: absolute;
   top: 50%;
   line-height: 0px;
   left: 0;
}

Answer 2

另外，如果您設置h2的字體大小，那么您只需向包裝器（或我相信的h2）添加負的上邊距，就像這樣...

.image { 
    position: relative; 
}

.wrapper {
    position: absolute;
    top: 50%; 
    left: 0;
    margin-top: -15px; /* Set negative margin here to pull it up */
}

h2 {
    margin: 0;
    padding: 0;
    z-index: 2;
    font-size: 30; /* Set font size here */
}

我將您的h2字體大小設置為30，然后在此處將.wrapper margin-top設置為-15。

它在jfiddle上http://jsfiddle.net/kmjRu/15/