HTML CSS表单-如何在页面上居中放置表单？

Question

我做了一个表格，我试图将它放在页面的中心，但是它不起作用。 我尝试将这2个CSS应用于它，但是没有用。

form{margin: 0 auto;}

form{margin: auto;}

我还尝试将表单包含在div.container中，并对其应用相同的CSS，但仍然没有执行任何操作。

但这有效：

{margin: 0 250px 0;}

在这里形成

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 ;，则需要设置一个Width。

Answer 4

您的form具有属性display: inline-block; ，这使其表现得像内联元素。 因此，您必须添加text-align: center; 使其父级水平居中。 像这样： http : //jsfiddle.net/bMf9M/4/ 。

不要忘记将表单的text-align为left ，否则它将具有居中对齐的文本。