Question

我想创建一个登录页面，但它隐藏在主页的中心。

然后我使用jquery使它周围的div可见，它就像www.bytes.com上的登录页面。

但我无法弄清楚如何用CSS中心。它不起作用而不影响主页div位置。

我只是希望它漂浮在主页面上。有人？

Answer 1

这是你想要的吗？注意CSS评论。让div居中很重要。使浮动位于网站其他部分之上的“技巧”是position: absolute。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Centering a DIV with CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
    <style type="text/css">

        .center_center {
            position: absolute;
            background-color: #ccc;
            border: 1px solid #000;
            width: 300px;
            height: 200px;
    /* notice: margins are -(value/2) */
    margin-left: -150px;
            margin-top: -100px;
            top: 50%;
            left: 50%;
            display: none;
        }
    </style>
</head>
<body>
    <div id='login' class="center_center">
        Login content
    </div>

    <p><input type="button" value="Login" onclick="$('#login').show()" /></p>
</body>
</html>

Answer 2

您可以尝试使用模式表单进行登录。 jquery ui做一个不错的http://jqueryui.com/demos/dialog/#modal-form，它会打开一个表格供你在页面中心使用。

如何在中心定位div并隐藏它？

2 个答案: