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

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

- YEON.JAE

---

我已经使用了display属性，但它没有起作用。 - YEON.JAE

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - TylerH

Answer 1

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

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

将该行代码添加到.image:after选择器中，就能实现您想要的效果。 JSFiddle示例

- TylerH

---

谢谢。我可以再问一个问题吗？如果高度不固定，那么就不可能了吗？ - YEON.JAE

@YEON.JAE 我不知道。 - TylerH

当我们有更长的文本时，这种方法就不起作用了，因为它可能会溢出到下一行。 - Vipin Kp

@VipinKp 这是真的，但这也不是 OP 要求的，所以没有理由因为符合指定标准的解决方案而投反对票。更重要的是，你不应该关注这个 Q&A，只需点击顶部的重复目标，那里有更多的规范解决方案。 - TylerH

Answer 2

这种方法更加可靠和有结构，可以清除空格。

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

- supportsp