Question

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

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

我该怎么做？提前谢谢。

Answer 1

@Lucius和@zyrolasting说得对。

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

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

Answer 2

只需将一些CSS放入样式表中就像这样

form {
  text-align: center;
}

然后你就完成了！

Answer 3

作为form块元素，您可以通过将其边距设置为auto来对齐它：

form { margin: 0 auto; }

修改
正如@moomoochoo正确指出的那样，只有在块元素（在本例中为您的表单）指定了特定宽度时，此规则才有效。
此外，这个“技巧”不适用于浮动元素。

Answer 4

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


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

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

Answer 5

使用center：

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

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

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

Answer 6

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

你可以调整top＆amp;取决于表格大小。

Answer 7

试试这个：通过以下方式将表单宽度设置为20％：
state:([\w\s]+)\s
现在，如果整个画布是100％，则中心为50％。因此，为了使形状的中心在中心对齐，50-（20/2）= 40。因此，将左边距设为40％：
width : 20%;

Answer 8

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

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

Answer 9

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

Answer 10

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

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

Answer 11

简单方法：在表单标记

之前添加“center”标记

HTML：如何居中对齐表单

11 个答案: