在CSS中居中DIV元素_Css_Html - Fatal编程技术网

在CSS中居中DIV元素

css html

在CSS中居中DIV元素,css,html,Css,Html,我想在CSS中居中放置一个Div元素。我找到的东西都试过了。什么都不管用？我已经用W3C的验证器检查了我的CSS。没有错误。我不懂。这是我最近的一次尝试正文{ 背景：url（loginbg.jpg）无重复中心固定； -webkit背景尺寸：封面； -moz背景尺寸：封面； -o-背景尺寸：封面；背景尺寸：封面； } 输入[type=“text”]，输入[type=“password”]{ 浮动：左；宽度：230px；填充：15px 5px 5px 5px；边缘顶部：5px；左边距：

我想在CSS中居中放置一个Div元素。我找到的东西都试过了。什么都不管用？我已经用W3C的验证器检查了我的CSS。没有错误。我不懂。这是我最近的一次尝试

正文{
背景：url（loginbg.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
输入[type=“text”]，输入[type=“password”]{
浮动：左；
宽度：230px；
填充：15px 5px 5px 5px；
边缘顶部：5px；
左边距：3倍；
边框：1px实心#999999；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
}
#提交img，sumbit按钮{
光标：指针；
保证金：0自动；
}
#罗吉纳雷亚酒店{
保证金：0自动；
}

我的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>


登录











版权所有2013公司名称| CraftManager 1.2 |信用

是因为页脚挡住了中心线吗

当前状态：

我在div上设置了一个宽度，并将边距“居中”。虽然它不是真正以中心为中心，但它起到了作用。

我以前做过这件事，代码不方便，所以我用谷歌搜索了一下。也许会有帮助

我不知道为什么它不让你这样做，用css从左边做50%，从上面做50%

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

这就是我感兴趣的地方，我自己的成绩和成功率甚至取决于分区的大小。

试试看

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

有关更多详细信息，请检查默认情况下

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

所以在div上设置一个宽度，200px或者其他什么，然后你可以设置

左边距：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:
看起来loginarea div没有关闭。请再核对一下
 密码的事情搞砸了。很抱歉只需粘贴代码，选择所有代码，然后按Ctrl+KI组合键，假设您要集中的是#loginarea
？HTML标记在哪里<代码>；）是的，这就是我要居中的内容。它稍微改变了它，但没有居中。@Algo应该是这样，除非它位于另一个宽度小于100%的元素中。@Algo您的HTML是正确的，但缺少宽度：200px在#loginarea
上。这里我设置了一个宽度，它是页面上唯一的div，我设置了边距。不工作？@Algo你在哪里设置的宽度？我正在查看您发布的代码，div上没有宽度。虽然它不是真正相关的，但请尝试添加overflow:hidden到#loginarea
。它清除内部浮动。见@Algo宽度：200px；保证金：0自动；除非你做了别的事情打破它，否则它肯定会起作用。除非您向我们展示您实际使用的代码，否则我们无法帮助您。请检查您是否已设置宽度Nope，它已关闭。不过我会在w3c上运行它。你也给loginarea添加了宽度吗？您可以在loginarea的开始标记中只使用ID而不使用类。啊哈！为什么我以前没见过这个答案？无论如何，谢谢！