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

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/

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

2 个答案: