Тікелей орталықтандырылған абсолютті позиция div-тің салыстырмалы позициясының ішіндегі div - Chrome-де жұмыс істейді, бірақ Сафари және т.б.

Мен тышқанның үстінде пайда болған кескіннің үстіне мәтінді тігінен тік қоюға тырысамын. Мен хроммен (15.0.874.106) mac (10.7.2) жұмыс істейтін шешімге келдім, бірақ Safari-де (5.1.1) мәселелер бар сияқты, себебі олар вебкитке негізделген. Менің ойымша, Firefox-де осындай проблема бар.

Мәтін тегжейлі хромтағы ата-ана дивизиттеріне қатысты тігінен орналасқан, бірақ Сафаридегі денеге немесе терезеге назар аударады. Мен дұрыс емес нәрсені істеп жатырмын ба, әлде біреудің жақсы шешімі бар ма?

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: cc мазмұнын жаңарту .content тұрақты биіктікке ие болу үшін, ол жұмыс істейді, бірақ бұл дивирус динамикалық биіктікке ие болатындай, биіктікті көрсетпестен бұл нәтижеге жетудің кез келген жолы бар ма? jsbin.com/iceroq/2
қосылды автор waffl, көзі

1 жауаптар

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

Өңдемелер барлық CSS-лерге .content-text a түрлендірілген. Сілтемені мүлдем орналастырып, оны height бере отырып, оны беруге мүмкіндік беретін margin-top (биіктіктің жартысы).

.content-text a {
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  color: white; 
}
0
қосылды
Өте жақсы, рахмет!
қосылды автор waffl, көзі