HTML: 如何将表单居中对齐

Question

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

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

我该怎么做？

- Marcus Tik

Answer 1

@Lucius和@zyrolasting说得对。

不过，为了让它正常工作，您可能需要为表单指定一个特定的 width 。

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

- TryHarder

Answer 2

只需将一些CSS放入样式表中，如下所示

form {
  text-align: center;
}

然后你就完成了！

- mads

---

@JohannBehrens：为什么这是不好的实践？ - favq

@anonymous：你需要通过在 .html 文件中仅使用 HTML，在 .css 文件中仅使用 CSS，将语义和设计分开。这样可以使你的代码整洁有序，易于其他开发人员或设计师阅读，具有未来性，我还可以继续说很多。 - Johann Behrens

text-align:center可以起作用。只需在CSS文件中使用它，一切都会很好。您也可以在HTML中使用<center>，但正如@JohannBehrens所指出的那样，样式必须是分开的。此外，<center>已过时。我最好的建议是在表单标签上使用样式表中的text-align:center。 - Akash Kumar Sharma

这将使您网站上的所有表单居中对齐。 - Carlitos

这个将文本居中于表单而不是窗口的代码，问题是否含糊不清？ - DJDave

Answer 3

由于form是块级元素，因此可以通过将其侧边距设置为自动来使其居中对齐：

form { margin: 0 auto; }

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

- Lucius

Answer 4

这将使该字段占据50％的宽度，并居中并适当调整大小

    {    
        width: 50%;
        margin-left : 25%
    }

也可以使用“vw”（视口宽度）单位代替“％”

- Yuri Gridin

Answer 5

使用center标签:

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

这只是一种方法，虽然不建议使用。 更好的做法请参考此文章。

注：请勿使用center标签，本文仅供参考。

- Cilan

---

<center>自HTML 4以来已被弃用。 - epox

@epox 如链接所述 - Cilan

仍然能够在浏览器中工作和被识别，但正如Cilan所提到的，这并不被推荐。 - heinkasner

Answer 6

最后两行需要居中对齐：

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

- jasraj

Answer 7

只需要将 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>

- Chicken Jon

---

在form中没有align属性。 - Shub

Answer 8

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

- dcube

Answer 9

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

您可以根据表单大小调整上部和左侧。

- Machinerium

Answer 10

简单的方法：在表单标签之前添加一个“center”标签

- Akshay

---

中心已被弃用。 - Thomas Ayoub