Question

当人们将鼠标悬停在该图像上时，我试图在图像上叠加带有白色半透明背景的文本。我在这里找到了包含以下代码的原始类型的答案。现在我想将文本垂直对齐到图像的中间。

有可能吗？

HTML：

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

CSS：

.image {
    position:relative;
    width:400px;
    height:400px;
}
.image img {
    width:100%;
    vertical-align:top;
}
.image:after {
    content: 'Hello';
    color: #000000;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    width:100%; 
    height:100%;
    top:0; 
    left:0;
    background: rgba(255,255,255,0.7);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

Answer 1

如果您正在使用的图像（或容器）的高度是固定的（如您的示例中所示），那么您可以使用line-height方法，如下所示：示例中的代码：

.image:after {
    line-height: 400px;
}

将该行添加到.image:after选择器，它将实现您想要的效果。

<强> JSFiddle Example

Answer 2

这对于清理空间更加确定和有条理。

.image:after {
    line-height: 400px;
    margin: 0;
    padding: 0;
}

如何在背景图像上垂直对齐文本？

2 个答案: