CSS / jQuery вертикально и горизонтально по центру DIV - PullRequest
Новая
       0

CSS / jQuery вертикально и горизонтально по центру DIV

1 голос
/ 03 апреля 2010

Я пытаюсь центрировать этот элемент по вертикали и горизонтали, даже когда есть контент для прокрутки, и пользователь прокручивает страницу вниз. Следующий тест отлично работает в IE, но в Firefox я получаю странный эффект мерцания при наведении курсора на изображение. Есть мысли? 

<html>
<head>
<title>aj</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

    $(function() {
        // img preview
        $('.img').hover(function() {

            if (!$('#overlay').length) {

                $('<div id="overlay"/>').css({
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    width: '100%',
                    zIndex: 100,
                    height: $(window).height() + 'px'
                }).appendTo('body');

                $('<div id="item" />').css({
                    border: '7px solid #999',
                    height: '500px',
                    width: '500px',
                    top: '50%',
                    left: '50%',
                    position: 'absolute',
                    marginTop: '-250px',
                    marginLeft: '-250px'
                }).append('<img src="' + $(this).attr('rel') + '" alt="img" />').appendTo('#overlay');
            }
        }, function() {

            $('#overlay').remove();
        });
    });

</script>

</head>
<body>
<img class="img" src="http://ajondeck.net/temp/paperboy_thumb.gif"    rel="http://ajondeck.net/temp/paperboy.gif"
    alt="image" />
</body>

</html>

1 Ответ

4 голосов
/ 03 апреля 2010

foo.css 

#container {
  display: table;
  width: 100%;
  height: 100%;
}
#position {
  display: table-cell;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}

foo.html 

<html>
  <head>
    <link rel="stylesheet" href="foo.css" type="text/css">
    <!--[if IE]>
      <style type="text/css">
      #container {
        position: relative;
      }
      #position {
        position: absolute; top: 50%;
      }
      #content {
        position: relative;
        top: -50%;
      }
      </style>
    <![endif]-->
  </head>
  <body>

    <div id="container">
      <div id="position">
        <div id="content">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.
        </div>
      </div>
    </div>

  </body>
</html>

демо

http://www.vdotmedia.com/demo/css-vertically-center.html

Примечание: Горизонтальное центрирование должно быть без пота, чтобы справиться самостоятельно.

РЕДАКТИРОВАТЬ: Я нашел другое демо

РЕДАКТИРОВАТЬ: Чтобы это решение для работало в HTML5 , вам нужно добавить html, body { height:100% } в ваш CSS (и, очевидно, <!DOCTYPE HTML> в начале вашего HTML-кода).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...