Css 带文本的图像悬停覆盖-文本位置

晚上好,， 我试图使图像悬停覆盖文本，但显示的文本始终位于图像的顶部。我想把它放在中间。 我尝试过填充等，但它也移动了覆盖层，覆盖了图像下方的可用空间。你能帮我一下吗，怎样只从上面给文本留边距？谢谢大家!

编辑：或者最好的解决方案是，如果我可以包含另一个只包含文本的div。因为我需要包含带有html标记的文本，而不可能通过“内容：”这样做

以下是CSS代码：

.image {
    position:relative;
    margin: 0 auto;

}
.image img {
    width:100%;
    vertical-align:;
}
.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;

    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

---

如果覆盖文本将是一行，则可以使用“行高css”属性使其垂直居中对齐

.image:after {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    line-height:300px;
}

如果没有，那么我建议使用另一种方式来显示内容

比如像这样的

：before

，或者您也可以使用

标记来代替

：before

标记检查此项

---

您只需添加

行高

.image{
位置：相对位置；
保证金：0自动；
}
.图像img{
宽度：100%；
垂直对齐：；
}
.图片：之后{
内容：'这里有一些文字'；
颜色：#fff；
位置：绝对位置；
宽度：100%；高度：100%；最大高度：100%；
线高：317px；
顶部：0；左侧：0；
背景：rgba（0,0,0,0.75）；
不透明度：0；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
}
。图片：悬停：之后{
不透明度：1；
}

---

这是另一个div或其他东西的解决方案，可以在其中插入带有HTML标记的文本：

.image{
位置：相对位置；
保证金：0自动；
宽度：317px；
高度：317px；
文本对齐：居中；
}
.图像img{
宽度：100%；
垂直对齐：；
}
.image.overlytext{
颜色：#fff；
位置：绝对位置；
宽度：100%；高度：100%；最大高度：100%；
线高：317px；
顶部：0；左侧：0；
背景：rgba（0,0,0,0.75）；
不透明度：0；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
保证金：0；
}
.image:hover>.overlytext{
不透明度：1；
}

以下是一些文本

您能创建一个小提琴演示吗？请阅读我们的页面，帮助您编写一个很棒的问题。好的问题往往能从客户那里得到好的/快速的回答community@om. 这就是：太棒了，谢谢！但这可以通过另一个div或其他什么东西来解决吗？在哪里可以插入带有HTML标记的文本？类似于

这里有一些文本，因为我需要在那里插入电话和电子邮件。。所以我需要至少使用

和。。但在最好的情况下，我想在文本前插入电话和电子邮件图标。。通过使用“内容：…；”是不可能的@HSturma:检查我的最新答案。我又添加了一个对代码的修改。就像你在评论中说的。谢谢！但是不可能使用两次，比如在图像上有两行：（即使我扩展了“p”的高度，但是
有效：）我以前应该尝试过。。谢谢你的解决方案@HSturma我不明白你想说什么，但是如果你想要多行文字，那么你可以在一个

标记中使用它。如果您想要多个

标记，您仍然可以使用我的示例，只需将

标记更改为
，并且在该div中可以有多个
标记。这很简单。没有什么比HTML结构化更不可能的了，：）
.image:after {
    content:'';
    color:#fff;
    position:absolute;
    width:100%; height: 100%; max-height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.75);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    z-index:1
}
.image:before {
    content:'Here is some text..';
    color:#fff;
    position:absolute;
    width:100%; height: 20px;
    top:0; left:0; right:0;
    bottom:0;
    opacity:0;
    margin:auto;
    z-index:2
}
.image:hover:after {
    opacity:1;
}
.image:hover:before {
    opacity:1;
}