Вертикально центрированный div абсолютной позиции внутри родительской относительной позиции - Работает в Chrome, но центрируется на теле в Safari и т.д.? - PullRequest
Новая
       22

Вертикально центрированный div абсолютной позиции внутри родительской относительной позиции - Работает в Chrome, но центрируется на теле в Safari и т.д.?

0 голосов
/ 27 октября 2011

Я пытаюсь расположить текст по центру изображения, которое появляется при наведении мыши. Я пришел к решению, которое работает с Chrome (15.0.874.106) на Mac (10.7.2), но, кажется, есть проблемы в Safari (5.1.1), странно, поскольку они оба основаны на webkit. Я считаю, что в Firefox такая же проблема.

Текст центрирован по вертикали относительно родительского div в chrome, но, кажется, центрируется по телу или окну в 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">
        <img src="http://placehold.it/300x500/E01B4C" />
    </div>
    <div class="content-text">
        <a href="http://www.google.com">Google</a>
    </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();
    });
});

1 Ответ

0 голосов
/ 27 октября 2011

Я редактировал ваш 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; 
}
...