如何将div放置在中心并将其隐藏？

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 个解决方案

解决方案1
3 2009-12-03 22:27:05

解决方案2
2 2009-12-03 22:21:13

如何将div放置在中心并将其隐藏？

问题描述

2 个解决方案

解决方案1 3 2009-12-03 22:27:05

解决方案2 2 2009-12-03 22:21:13

解决方案1
3 2009-12-03 22:27:05

解决方案2
2 2009-12-03 22:21:13