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

Question

我正在尝试将 an 垂直居中于 anh2之上img，但我无法将其完全居中。我快到了，但我如何才能准确地到达那里？

细节：

• 我不知道任何元素的高度，所以我不能使用固定高度并且不能将图像设置为背景，因为图像是内容的一部分
• 有人建议，但我已经尝试过了，它与anddisplay:table不兼容position:relativeposition: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 font-size 设置为 30，然后将 .wrapper margin-top 设置为 -15。

这是在 jfiddle http://jsfiddle.net/kmjRu/15/