在将表单元素居中时，这些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不会改变元素宽度。 如果您的<form>的子元素比您在其上设置的宽度（即5px大小写）宽，则可以这样做。 要进行测试，请在子元素中添加border或background-color ，并检查表单是否有溢出。

另一种更快的替代方法是使用Firefox的Web Developer插件 。 一旦安装完毕， CTRL+SHIFT+Y将显示您悬停的任何元素的样式信息。