Question

我正在尝试将带有文本的元素集中在图像上，并且我的代码在任何地方都可以正常工作，除了Safari（对于Windows，如果这意味着什么），它甚至适用于Internet Explorer 9！

这是一个小提琴：http://jsfiddle.net/keleturner/b7DeH/

我找到的唯一方法是给.main一个设定的高度，但由于各种原因我不能这样做。有没有办法让文本覆盖在图像中间，高度为：auto;？

Answer 1

我不确定你是否有特殊理由进行重型div嵌套，但我已将其清理干净了：http://jsfiddle.net/b7DeH/3/

HTML：

<div class="main">
    <span>Text</span>
    <img src="http://placekitten.com/300/200?image=3" />
</div>

CSS：

span  {
    position: absolute;
    width: 100%; top: 50%; 
    /* and other prefixes */
    transform: translateY(-50%); 
    font-size: 20px; font-weight: 700; 
    color: red; text-align: center; }

正如您所注意到的那样，问题似乎源于高度问题。你有高度：100％用于.in和.out但没有任何父/祖先告诉它高度是100％，它只会继续前进，我想它基本上占据了文档的100％高度，因此，为什么它以页面为中心而不是div。

Answer 2

尝试使用绝对定位。

span {
   position: absolute;
}

使用CSS3在Safari上无法在图像上使用绝对位置文本

2 个答案: