如何在背景图像上垂直排列文字？

我试图在人们将鼠标放在该图像上时，在图像上覆盖带有白色半透明背景的文本。我在这里找到了包含以下代码的原始类型的答案。现在我想垂直对齐图像中间的文字。如何在背景图像上垂直排列文字？

可能吗？

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

来源

2014-12-22 YEON.JAE

我使用的显示属性已经，它并没有@ YEON.JAE比工作 –

以供将来参考，也请注意，有时，当有人将问题的重复，有可能是一个有用的答案* *其他在相关问题上接受的答案。在这种情况下，饼干链接中的第二个答案使用行高示例:-) – TylerH

如果图像（或容器）您使用的高度是固定的，如在你的例子，则可以使用一个line-height方法，如下例所示：

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

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

JSFiddle Example

来源

2014-12-22 18:35:48 TylerH

谢谢。我可以再问一个吗？如果高度不固定，是不是可以呢？ –

@ YEON.JAE我不知道 – TylerH

好吧。谢谢！ –

这更确定和构造清洁的空间。

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

来源

2014-12-22 18:41:52 supportsp

如何在背景图像上垂直排列文字？

回答

相关问题