将表单元素居中时，这些 CSS 属性意味着什么？

Question

在搜索如何在 CSS 中将 form 元素居中时，我发现必须将 margin 设置为 auto然后设置 width 属性。但是，这里的 width 代表什么？

例如，当我将 width 设置为 350px 时，我会将表单置于中心，而当将其设置为 5px 时，我不会不要让它居中。

您能解释一下 width 这里代表什么吗？

谢谢。

Answer 1

width 是元素显示时本身的宽度，需要设置该宽度，以便浏览器能够自动计算元素周围的边距，使其显示居中。至于为什么 5px 的值不能使元素居中，而 350px 的值不能居中，我不确定，我从未遇到过这个问题，也许只是表单无法调整那么小，所以它会自动更改由浏览器设置为 auto 的宽度。

Answer 2

这是一个简单的测试来显示发生了什么：

HTML

/* This form will be 200px and centered within its parent element */
<form></form>

/* #formsection is 300px and not centered.  The form it contains will be 
   200px and centered withint #formsection */
<div id="formsection">
    <form></form>
</div

CSS

/* All forms will be 200px and centered in their parent container */
form {
  width: 200px;        
  margin: 0 auto;      
  border: 1px solid red;   
}

/* #formsection is 300px in width and not centered */
#formsection {
  width: 300px;
  border: 1px solid blue;
}

#formsection form {
  border: 1px solid green;   
}

您可以看到 此处演示。

您曾提到 width 不会更改元素宽度。如果您的

的子元素比您在其上设置的宽度更宽（即您的 5px 情况），则这是可能的。要进行测试，请向子元素添加 border 或 background-color 并检查是否有溢出表单。

另一种更快的替代方法是使用 Web Developer 插件对于火狐浏览器。安装后，CTRL+SHIFT+Y 将显示您将鼠标悬停在其上的任何元素的样式信息。