在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的宽度，以及 “中心” 边缘。它有所不同，虽然它不是真正的中心。

来源

2013-05-12 Algo

代码的东西被搞砸了。抱歉! – Algo 2013-05-12 04:01:24

只需粘贴代码，选择所有的代码，然后按Ctrl + K – Musa 2013-05-12 04:02:09

我假设'＃loginarea'是你想要居中？ – 2013-05-12 04:04:51

我已经做到了这一点，代码不方便，所以我GOOGLE了它。 http://www.dzone.com/snippets/dead-centre-div可能会有所帮助。

我不知道为什么它不会让你这样做，通过从左边的CSS和从顶部的50％做50％。

您是否有兴趣将它置于垂直和水平方向？

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

来源

2013-05-12 04:04:59

啊哈！为什么我之前没有看到过这个答案？反正谢谢！ – Algo 2013-12-21 00:02:45

尝试设置

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

以了解详情here

来源

2013-05-12 04:06:01

我之前试过这个 – Algo 2013-05-12 04:08:54

检查你是否设置了宽度 – 2013-05-12 04:18:11

缺省情况下<div>元素填满父元素的宽度的100％。如果你想集中它，那么你必须做的第一件事是使它小于100％宽。

所以设置的股利，200像素或东西的宽度，然后你可以设置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-12 04:06:33

不工作:(是的，我的HTML？ – Algo 2013-05-12 04:13:30

@Algo你的HTML是正确的，但你缺少'width：200px;'on'＃loginarea'。 /jsfiddle.net/LzgpW/ – 2013-05-12 04:16:43

它门槛不居中是正确的。 – Algo 2013-05-12 04:23:03

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-12 04:08:03

它改变了一点，但没有居中。 – Algo 2013-05-12 04:10:05

@Algo它应该是，除非你把它放在宽度小于100％的另一个元素中。 – 2013-05-12 04:11:24

@Algo看到jsFiddle的例子 - 它应该工作。 – 2013-05-12 04:15:03

它看起来像loginarea DIV未关闭。请仔细检查一下。

来源

2013-05-12 18:06:07

不，它已关闭。不过我会通过w3c来运行它。 – Algo 2013-05-12 20:10:47

W3C说它很好！ – Algo 2013-05-12 20:16:54

您是否为loginarea添加了宽度？你可以在loginarea的开始标签中只使用没有该类的ID。 – 2013-05-12 21:25:32

在CSS中居中放置一个DIV元素

回答

相关问题