HTML CSS 表单 - 如何使表单在页面上居中？答案

【问题标题】：HTML CSS Form - How to center the form on the page?HTML CSS 表单 - 如何使表单在页面上居中？
【发布时间】：2013-03-28 02:04:45
【问题描述】：

我制作了一个表单，我试图将其置于页面中心，但它不起作用。我尝试将这 2 个 CSS 应用到它，但它不起作用。

form{margin: 0 auto;}

form{margin: auto;}

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

但这有效：

{margin: 0 250px 0;}

表格here

【问题讨论】：

【解决方案1】：

你需要做两件事来实现这一点：

1) 将表单上的inline-block 显示更改为block。
2) 固定宽度（您目前拥有它为auto）。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果你喜欢使用margin:auto，你需要设置一个宽度；

【讨论】：

【解决方案4】：

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

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

【讨论】：