HTML CSS表单 - 如何将表单置于页面中心？

Question

我做了一个表单，我试图将它放在页面上，但它不起作用。我尝试将这两个CSS应用于它，但它没有用。

form{margin: 0 auto;}

form{margin: auto;}

我还尝试将表单封装到div.container并将相同的CSS应用于它但仍然没有。

但这有效：

{margin: 0 250px 0;}

表格here

Answer 1

你需要做两件事来实现这个目标：

1）将表单上的inline-block显示更改为block。
2）修正宽度（您目前将其作为auto）。

演示：http://jsfiddle.net/bMf9M/2/

或者，如果您不想修改表单大小，可以使用text-align: center（感谢@donderpiet）

演示：http://jsfiddle.net/bMf9M/4/

Answer 2

您必须将容器的宽度指定为具有display:block属性的元素，其大小自动调整为容器的最大宽度。

Answer 3

如果您想使用margin：auto;

，则需要设置宽度

Answer 4

您的form有一个属性display: inline-block;，这使其行为类似于内联元素。因此，您必须将text-align: center;添加到其父级，以使其水平居中。像这样：http://jsfiddle.net/bMf9M/4/。

不要忘记将表单的text-align设置为left，否则会有中心对齐的文字。