使用CSS3在圖像上的絕對位置文本在Safari上不起作用

Question

我試圖將文本上的元素居中，並且我的代碼在任何地方都可以正常工作，除了在Safari上（對於Windows，如果是這樣的話），它甚至都可以在Internet Explorer 9上使用！

這是一個小提琴： http : //jsfiddle.net/keleturner/b7DeH/

我發現的唯一方法是給.main設置一個高度，但是由於種種原因我不能這樣做。 有沒有一種方法可以使文本以高度自動覆蓋在圖像的中間？

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; }

正如您所注意到的，該問題似乎源於高度問題。 您有身高：.in和.out為100％，但沒有任何父母/祖先告訴它那個高度是100％的高度，它會繼續前進，我想這基本上就是文檔的100％高度，因此，為什么它居中於頁面而不是div。

Answer 2

也嘗試對跨度使用絕對定位。

span {
   position: absolute;
}