Verticaal gecentreerde absolute positie div binnen relatieve positie bovenliggende - Werkt in Chrome, maar centreert naar lichaam in Safari enz.?

Question

Verticaal gecentreerde absolute positie div binnen relatieve positie bovenliggende - Werkt in Chrome, maar centreert naar lichaam in Safari enz.?

Ik probeer verticaal wat tekst te centreren over een afbeelding die verschijnt bij een mouseover. Ik ben tot een oplossing gekomen die werkt met chrome (15.0.874.106) op een mac (10.7.2), maar het lijkt problemen te hebben in Safari (5.1.1), vreemd omdat ze beide op een webkit zijn gebaseerd. Ik geloof dat het ook hetzelfde probleem heeft in Firefox.

De tekst is verticaal gecentreerd ten opzichte van de bovenliggende div in chrome, maar lijkt in het midden van het lichaam of venster in Safari te staan. Doe ik iets verkeerd of heeft iemand een betere oplossing?

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

toegevoegd 27 oktober 2011 op 06:14 de auteur waffl

Bekeken: 7

de bron

OK: de CSS bijwerken zodat .content een vaste hoogte heeft, het werkt, maar omdat deze div objecten van dynamische hoogte heeft, is er een manier om dit effect te bereiken zonder een hoogte op te geven? jsbin.com/iceroq/2

toegevoegd 27 oktober 2011 op 06:20, de auteur waffl, de bron

1 antwoord

de auteur nheinrich · Answer 1 · 2011-10-27T06:33Z

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

De bewerkingen waren alle CSS-wijzigingen in .content-text a . Door de link absoluut te plaatsen en een hoogte te geven, kun je weten wat margin-top is om deze te geven (de helft van de hoogte).

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