Вертыкальна па цэнтры абсалютнага становішча DIV ўнутры адноснага становішча з бацькоў - працуе ў Chrome, але цэнтры для цела ў Safari і г.д.?

Я спрабую вертыкальна Цэнтраваць тэкст над малюнкам, якое з'яўляецца на навядзенні курсора мышы. Я прыйшоў да рашэння, якое працуе з хромам (15.0.874.106) на Макінтош (10.7.2), але, здаецца, ёсць праблемы ў 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: Абнаўленне CSS, так што .content мае фіксаваную вышыню, яна працуе, але ў гэтым DIV будзе мець аб'екты дынамічнай вышыні, ці ёсць спосаб для дасягнення гэтага эфекту без ўказанні вышыні? jsbin.com/iceroq/2
дададзена аўтар waffl, крыніца

1 адказы

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

Праўкі былі ўсе змены CSS у .content-тэкст у . Робячы спасылку абсалютна пазіцыянаваны і даючы яму вышыня дазваляе ведаць, што Верхняе поле , каб даць яго (палову вышыні).

.content-text a {
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  color: white; 
}
0
дададзена
Абсалютна дасканалым, дзякуй!
дададзена аўтар waffl, крыніца