私はマウスオーバーで表示される画像の上にテキストを垂直方向に配置しようとしています。私は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();
});
});