使用 jQuery 将网页水平和垂直居中

发布于 2024-11-17 10:44:28 字数 776 浏览 2 评论 0原文

谁能告诉我这段代码有什么问题吗？我试图将我的网页垂直和水平居中，但这不起作用！它不以我为中心。

<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>

原文

Can anyone tell me whats wrong with this code? I'm trying to center my webpages vertically and horizontally but this isn't working! It's not centering for me.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盗心人 2024-11-24 10:44:28

试试这个吧。

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%，然后将其边距设置为对象宽度或高度的一半。

Try this instead.

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

A very reliable way to center an absolutely positioned element is to set its position from the left or top to 50%, and then its margin to -half the width or height of the object.

回复收藏 0 原文

~没有更多了~