将标头垂直居中放置在图像顶部

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/