1

我想在 CSS 中居中一个 Div 元素。我已经尝试了我发现的一切。似乎没有任何工作？我用 W3C 的验证器检查了我的 CSS。没有错误。我一无所知。这是我最近的尝试。

body {
   background: url(loginbg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

input[type="text"], input[type="password"] {
    float: left; 
    width: 230px; 
    padding: 15px 5px 5px 5px; 
    margin-top: 5px; 
    margin-left: 3px; 
    border: 1px solid #999999;  
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px;     
}


#submit_img, #sumbit_button {
   cursor: pointer;
   margin:0 auto;
}

#loginarea {
   margin:0 auto;
}

我的 HTML 代码：

<head>
<link rel="stylesheet" type"text/css" href="login.css">
<title>
Login
</title>
</head>
<body>
<div id="loginarea" class="loginarea">
<div id="username_box">
<input type="text" id="username" value="Username">
</div> <div id="password_box">
<br><br><br><br>
<input type="password" id="password" value="Password">
</div>
    <br><br><bR>
    <button id="sumbit_button" style="border: 0; background: transparent;">
        <img src="loginbutton.png" width="150" height: "50" id="sumbit_img">
     </button>
    <br>
 </div>
<div id="footer" class="footer">
    Copyright 2013 company name| CraftManager 1.2 | Credits
    </div>
</body>
</html>

是页脚挡住了居中吗？

当前状态：

我在 div 上设置了一个宽度，并将边距“居中”。它有所作为，尽管它并不是真正的居中。

4

5 回答 5

3

默认情况下，<div>元素填充父元素宽度的 100%。如果你想让它居中，那么你要做的第一件事就是让它的宽度小于 100%。

所以在div上设置一个宽度，200px什么的，然后就可以设置margin-left: auto;和margin-right: auto;

#loginarea {
  width: 200px;
  margin: 0 auto; /* top/bottom: 0 margin. left/right: auto margin */
}

http://jsfiddle.net/LzgpW/

于 2013-05-12T04:06:33.873 回答
0

我以前做过，代码不方便，所以我用谷歌搜索了它。 http://www.dzone.com/snippets/dead-centre-div可能会有所帮助。

我不知道为什么它不会让你这样做，从左边用 css 做 50%，从顶部做 50%。

您对垂直和水平居中感兴趣吗？

这就是我感兴趣的，我自己的结果和成功率甚至取决于 div 的大小。

于 2013-05-12T04:04:59.653 回答
0

尝试设置

   margin-left: auto ;
   margin-right: auto ;

有关更多详细信息，请在此处查看

于 2013-05-12T04:06:01.437 回答
0

auto仅当要居中的元素具有“已知”大小时，边距才有效。所以，如果你想#loginarea居中，你需要给它一个宽度：

#loginarea {
    width:30em; /* can be any relative or fixed size, like 200px or 30% */
    margin: 0 auto;
}

示例： jsFiddle：http: //jsfiddle.net/XBCVc/1/

于 2013-05-12T04:08:03.190 回答
0

看起来 loginarea div 没有关闭。请仔细检查。

于 2013-05-12T18:06:07.570 回答