html - 使用CSS3在图像上的绝对位置文本在Safari上不起作用

我试图在图像上将文本的元素居中，并且我的代码在任何地方都可以正常工作，但在Safari上除外（对于Windows，这意味着什么），它甚至可以在Internet Explorer 9上运行！

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

我发现的唯一方法是给.main设置一个高度，但是由于种种原因我不能这样做。有没有一种方法可以使文本以高度自动覆盖在图像中间？

最佳答案

我不确定您是否有大量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; }

正如您所注意到的，该问题似乎源于高度问题。您有高度：.in和.out为100％，但没有任何父母/祖先告诉它该高度是100％的高度，它会一直继续下去，我想这基本上就是文档的100％高度，因此，为什么它居中于页面而不是div。

关于html - 使用CSS3在图像上的绝对位置文本在Safari上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24689302/