HTML：如何居中对齐表单答案

【问题标题】：HTML: How to center align a formHTML：如何居中对齐表单
【发布时间】：2012-04-02 00:05:17
【问题描述】：

我有以下 HTML 代码，我想让我的表单居中对齐。

<form action="advsearcher.php" method="get">
    Search this website:<input align="center" type="text" name="search" />
    <input type="submit" value="Search"/>
</form>

我该怎么做？提前致谢。

【问题讨论】：

标签： html

【解决方案1】：

只需将 align="center" 移动到 form 标签

<form align="center" action="advsearcher.php" method="get">
    Search this website:<input type="text" name="search" />
    <input type="submit" value="Search"/>
</form>

【讨论】：

【解决方案2】：

这将使该字段占据 50% 的宽度并正确居中和调整大小

{ 宽度：50%；左边距：25% }

也可以使用“vw”（视图宽度）单位而不是“%”

【讨论】：

【解决方案3】：

使用center:

<center><form></form></center>

这只是一种方法，虽然不是advised.

古代编辑：请不要这样做。我只是说它是存在的。

【讨论】：

自 HTLM 4 起已弃用
@epox 如链接中所述
在浏览器中仍然有效并被识别，但正如 Cilan 所说，不建议这样做。

【解决方案4】：

最后两行对于居中对齐很重要：

.f01 {
    background-color: rgb(16, 216, 252);
    padding: 100px;
    text-align: left;
    margin: auto;
    display: table;
}

【讨论】：

【解决方案5】：

试试这个：通过以下方式将表单的宽度设置为 20%：
width : 20%;
现在如果整个画布是 100%，那么中心是 50%。所以要将表格的中心对齐到中心，50-(20/2) = 40。因此，通过这样做将左边距设置为 40%：
left : 40%;

【讨论】：

【解决方案6】：

简单方法：在表单标签前加一个“中心”标签

【讨论】：

中心已弃用。

【解决方案7】：

像这样在样式表中加入一些 CSS

form {
  text-align: center;
}

那么你就完成了！

【讨论】：

@JohannBehrens：为什么这是不好的做法？
@anonymous：您需要在 .html 文件中仅使用 HTML，在 .css 文件中仅使用 CSS，从而将语义和设计彼此分离。使您的代码干净且结构化，其他开发人员或设计人员可读，面向未来，我可以持续更长时间。
text-align:center 有效。只需在 css 文件中使用它，一切都很好。您也可以在 HTML 中使用，但正如 @JohannBehrens 所指出的，样式必须是独立的。而且已经过时了。我最好的选择是 text-align:center 在表单标签的样式表中。
这将使您网站中心上的所有表单对齐。
这使文本在表单中居中，而不是在窗口中居中.. 问题是否模棱两可？

【解决方案8】：

<center><form></form></center>

在大多数情况下确实有效，例如上面提到的 Wobbuffet...

【讨论】：

-1 <center> 已弃用。 1.W3Schools 2.Mozilla
在浏览器中仍然可以工作和识别，但不建议这样做。

【解决方案9】：

#form{
   position:fixed;
   top:50%;
   left:50%;
   width:250px;
}

您可以根据表格大小调整顶部和左侧。

【讨论】：

【解决方案10】：

作为form 块元素，您可以通过将其侧边距设置为自动来居中对齐：

form { margin: 0 auto; }

编辑：
正如@moomoochoo 正确指出的那样，此规则仅在块元素（在本例中为您的表单）已分配特定宽度时才有效。
此外，此“技巧”不适用于浮动元素。

【讨论】：

【解决方案11】：

@Lucius 和 @zyrolasting 说得对。

但是，您可能需要为表单指定一个指定的width 才能使其正常工作。

form { 
margin: 0 auto; 
width:250px;
}

【讨论】：