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();
});
});