相対的な位置の内部に垂直に配置された絶対位置div - Chromeでは動作しますが、Safariなどでは本体を中心にしていますか？

Question

相対的な位置の内部に垂直に配置された絶対位置div - Chromeでは動作しますが、Safariなどでは本体を中心にしていますか？

私はマウスオーバーで表示される画像の上にテキストを垂直方向に配置しようとしています。私はmac（10.7.2）でchrome（15.0.874.106）で動作するソリューションになっていますが、Safari（5.1.1）に問題があるようです。両方ともWebkitベースであるためです。 Firefoxでも同じ問題があると私は信じています。

テキストはクロムの親divとの関係で垂直方向に中央揃えされていますが、Safariの本文またはウィンドウの中央に表示されます。間違ったことをしているのですか、誰かがより良い解決策を持っていますか？

jsbin: http://jsbin.com/iceroq

CSS：

.content {
    width: 300px;
    position: relative;
}
.content-text {
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    display: none;
}

HTML：

<div class="content">
    <div class="content-image">
        
    </div>
    <div class="content-text">
        Google
    </div>
</div>
.content-text a {
    color: white;
    position: relative;
    top: 50%;
    margin-top: -0.5em;
}

JS：

$(document).ready(function() {
    $('.content').hover(

    function() {
        $(this).children('.content-text').show();
    }, function() {
        $(this).children('.content-text').hide();
    });
});

0

追加された 27 10月 2011 〜で 06:14 著者 waffl

ビュー: 21

源

OK：.contentが固定された高さを持つようにCSSを更新しますが、このdivは動的な高さのオブジェクトを持つため、高さを指定せずにこの効果を達成する方法はありますか？ rel="nofollow noreferrer"> jsbin.com/iceroq/2

追加された 27 10月 2011 〜で 06:20, 著者 waffl, 源

1 答え

著者 nheinrich · Answer 1 · 2011-10-27T06:33Z

I edited your jsbin: http://jsbin.com/iceroq/3

編集内容はすべて .content-text に変更されました。リンクを絶対的に配置し、 height を与えることで、それを与える margin-top を知ることができます（高さの半分）。

.content-text a {
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  color: white; 
}