相対的な位置の内部に垂直に配置された絶対位置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
OK:.contentが固定された高さを持つようにCSSを更新しますが、このdivは動的な高さのオブジェクトを持つため、高さを指定せずにこの効果を達成する方法はありますか? rel="nofollow noreferrer"> jsbin.com/iceroq/2
追加された 著者 waffl,

1 答え

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; 
}
0
追加された
絶対完璧です、ありがとう!
追加された 著者 waffl,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript