html - 在图像顶部垂直居中标题

Question

我正在尝试将 h2 垂直居中在 img 之上，但我不能让它完全居中。我快到了，但我如何准确地做到这一点？

详细信息:

• 我不知道任何元素的高度，所以我不能使用固定高度并且不能将图像设置为背景，因为图像是内容的一部分
• 有人建议display:table ，但我试过了，但它与 position:relative 的配合并不好和 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;
}