Центрирование веб-страниц по горизонтали и вертикали с помощью jQuery - PullRequest
Новая
       10

Центрирование веб-страниц по горизонтали и вертикали с помощью jQuery

0 голосов
/ 28 июня 2011

Может кто-нибудь сказать мне, что не так с этим кодом? Я пытаюсь центрировать свои веб-страницы по вертикали и горизонтали, но это не работает! Это не для меня. 

<html>
<head>
    <title>String Functions</title>
    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript">
    jQuery.fn.center = function() {
     this.css("position", "absolute");
     this.css("top", ($(document).height() - this.height()) / 2 + $(document).scrollTop() + "px");
     this.css("left", ($(document).width() - this.width()) / 2 + $(document).scrollLeft() + "px");
    return this;
    };

    $("#d1").center();
    </script>       
</head>

<body>

<div id="d1" style="background-color:red;width:100px; height: 100px;"></div>    

</body>

1 Ответ

1 голос
/ 28 июня 2011

Попробуйте вместо этого.

jQuery.fn.center = function() {
    this.css({
        "position" : "absolute",
        "top" : "50%",
        "left" : "50%",
        "margin-left" : (this.width() / 2) * -1,
        "margin-top" : (this.width() / 2) * -1
    });
};

Очень надежный способ центрировать абсолютно позиционированный элемент - это установить его положение слева или сверху до 50%, а затем его отступ равным половине ширины или высоты объекта.

...