Question

我在Chrome，Firefox和Safari中尝试过以下代码，但我的div并没有完全集中。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link href="custom.css" media="screen" rel="stylesheet" type="text/css" />
</head> 
<body>  
    <div class="center">Hello!</div>
</body> 
</html>

custom.css：

.center {
  width: 400px;
  margin: 0 auto;
  border: 5px solid black;
}

这会在Chrome中生成以下内容： alt text

你可以看到左边距大于右边距。

我做错了什么？

Answer 1

这是因为正文有一个边距（浏览器默认）：

body { margin: 0px; }

您可能想要使用CSS reset。

如果你的窗户更大，它应该看起来很正常。在你的截图中，它就像：

mug

Answer 2

窗户太窄了。自动边距在可用空间中居中，如果空间比元素窄，则它会左对齐。

所以，从左到右你会看到身体元素上的填充或边距（在这种情况下是边缘，因为它是Chrome），然后是div的边框，然后是400px的宽度，然后是下一个边框，然后窗口边缘，因为没有任何空间来渲染身体的右边距。

Answer 3

我无法将按钮设置为镀铬中心。为按钮提供宽度将起作用。但这会导致所有按钮都有宽度的问题。

这个修补程序在浏览器中似乎很开心。主要的解决方法是给输入类型按钮一个宽度，这是有效的，但是当你有一个大的Web应用程序管理所有这些可能是不可行的。

发现这个，是的，它是一个黑客，但似乎是在IE7-9 FF铬工作。

.submitArea .actButton  {margin-right: auto !important; margin-left: auto !important; display: block;}
@media screen and (-webkit-min-device-pixel-ratio:0) { .submitArea .actButton  {display: inline-block !important;}}  /* chrome hack - needs width for buttons to center */

Answer 4

你需要为你的CSS添加相对定位。

.center {
 position:relative;
 width: 400px;
 margin: 0 auto;
 border: 5px solid black;
}

Answer 5

尝试将此作为.center类的css：

.center { 宽度：400px; 保证金左：自动; 保证金右：自动; 边框：5px纯黑色; }

保证金：0自动不居中？

5 个答案: