在CSS中居中放置一个DIV元素
我想在CSS中放置一个Div元素。我尝试了我发现的一切。似乎没有任何工作? 我用W3C的验证器检查了我的CSS。没有错误。我无能为力。这是我最近的尝试。在CSS中居中放置一个DIV元素
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的宽度,以及 “中心” 边缘。它有所不同,虽然它不是真正的中心。
我已经做到了这一点,代码不方便,所以我GOOGLE了它。 http://www.dzone.com/snippets/dead-centre-div可能会有所帮助。
我不知道为什么它不会让你这样做,通过从左边的CSS和从顶部的50%做50%。
您是否有兴趣将它置于垂直和水平方向?
这就是我所感兴趣的,我自己的结果和成功率甚至取决于div的大小。
啊哈!为什么我之前没有看到过这个答案?反正谢谢! – Algo 2013-12-21 00:02:45
缺省情况下<div>
元素填满父元素的宽度的100%。如果你想集中它,那么你必须做的第一件事是使它小于100%宽。
所以设置的股利,200像素或东西的宽度,然后你可以设置margin-left: auto;
和margin-right: auto;
当元件中心有一个“已知”
#loginarea {
width: 200px;
margin: 0 auto; /* top/bottom: 0 margin. left/right: auto margin */
}
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/
它改变了一点,但没有居中。 – Algo 2013-05-12 04:10:05
@Algo它应该是,除非你把它放在宽度小于100%的另一个元素中。 – 2013-05-12 04:11:24
@Algo看到jsFiddle的例子 - 它应该工作。 – 2013-05-12 04:15:03
代码的东西被搞砸了。抱歉! – Algo 2013-05-12 04:01:24
只需粘贴代码,选择所有的代码,然后按Ctrl + K – Musa 2013-05-12 04:02:09
我假设'#loginarea'是你想要居中? – 2013-05-12 04:04:51