CSS 悬停时图像上浮动文本的问题

Question

我在大约一年前 (http://originalchuck.com/) 设计的 Shopify 网站上工作时产生了这种效果，然后今晚，在我不知情的情况下，客户决定购买一个新主题，打开它，然后现在我的 CSS 技巧之一不再有效。如果您查看两篇博文下方的三张图片，您就会发现问题所在。滚动它们，图像不透明度会发生变化。这是个好消息。坏的？跨度中的一些文本也应该出现在每个图像的死点，但现在不再出现了。我的代码与之前的主题相同，为什么它不再起作用了？这是我的 CSS:

span.text-content, span.text-content-bags {
     color: #ffffff;
     font-size: 30px;
     left: 0px;
     opacity: 0;
     position: absolute;
     text-transform: uppercase;
     top: 0px;
     width: 100%;
}

span.text-content span, div.homepage-bags span.text-content-bags span {
     left: 0px;
     margin-top: -12px;
     position: relative;
     text-align: center;
     top: 50%;
     width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
    opacity: 1;
    display: inline-block;
}

Answer 1

这里有一个很酷的技巧，可以让容器中的东西居中：

在外部包含元素上设置 position: relative，然后在您想要居中的元素上，执行此操作：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;

您还需要为内部元素设置高度和宽度。单位应该无关紧要。

适用于所有浏览器，至少包括 IE8+。它甚至可能比那更早。

CSS 悬停时图像上浮动文本的问题

CSS issue with floating text over images on hover

html

css

hover

centering