如何在背景图像上垂直对齐文本？ [复制]

Posted 2023-03-05

【中文标题】如何在背景图像上垂直对齐文本？ [复制]

【英文标题】：How do I align text vertically over a background image? [duplicate]

【发布时间】：2015-02-20 21:16:38

【问题描述】：

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

有可能吗？

html：

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg"  />
</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;

【问题讨论】：

我已经使用了 display 属性，它不起作用

@YEON.JAE 供将来参考，请注意，有时，当有人将问题标记为重复时，可能会有一个有用的答案除了接受的答案链接的问题。在这种情况下，Biscuit 链接中的第二个答案使用了行高示例 :-)

【参考方案1】：

这更加确定和结构化以清洁空间。

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

【参考方案2】：

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

.image:after 
    line-height: 400px;

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

JSFiddle Example

【讨论】：

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

@YEON.JAE 我不知道

这在我们有较长的文本时不起作用，可能会溢出到下一行。

@VipinKp 没错，但这也不是 OP 所要求的，因此没有理由对符合指定标准的解决方案投反对票。更重要的是，除了点击顶部的重复目标之外，您不应该关注此问答。