HTML：如何居中对齐表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9737394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: How to center align a form
提问by Marcus Tik
I have the following HTML code and i want to make my form aligned in center.
我有以下 HTML 代码，我想让我的表单居中对齐。
<form action="advsearcher.php" method="get">
Search this website:<input align="center" type="text" name="search" />
<input type="submit" value="Search"/>
</form>
How can I do that? Thanks in advance.
我怎样才能做到这一点？提前致谢。
回答by TryHarder
@Lucius and @zyrolasting have it right.
@Lucius 和 @zyrolast 说得对。
However, you will probably need to give the form a specified widthfor it to work properly.
但是，您可能需要指定表单width才能正常工作。
form {
margin: 0 auto;
width:250px;
}
回答by mads
Just put some CSS into the stylesheet like this
只需像这样将一些 CSS 放入样式表中
form {
text-align: center;
}
then you're done!
那么你就完成了！
回答by Lucius
Being forma block element, you can center-align it by setting its side margins to auto:
作为form块元素，您可以通过将其侧边距设置为 auto 来居中对齐它：
form { margin: 0 auto; }
EDIT:
As @moomoochoo correctly pointed out, this rule will only work if the block element (your form, in this case) has been assigned a specific width.
Also, this 'trick' will not work for floating elements.
编辑：
正如@moomoochoo 正确指出的那样，此规则仅在块元素（在本例中为您的表单）已分配特定宽度时才有效。
此外，这个“技巧”不适用于浮动元素。
回答by Cilan
回答by Yuri Gridin
This will have the field take 50% of the width and be centered and resized properly
这将使字段占据 50% 的宽度并正确居中和调整大小
{
width: 50%;
margin-left : 25%
}
May also use "vw" (view width) units instead of "%"
也可以使用“vw”（视图宽度）单位而不是“%”
回答by jasraj
The last two lines are important to align in center:
最后两行对于居中对齐很重要：
.f01 {
background-color: rgb(16, 216, 252);
padding: 100px;
text-align: left;
margin: auto;
display: table;
}
回答by Machinerium
#form{
position:fixed;
top:50%;
left:50%;
width:250px;
}
You can adjust top & left depending on form size.
您可以根据表单大小调整顶部和左侧。
回答by dcube
Try this :
Set the width of the form as 20% by: width : 20%;
now if the entire canvas is 100 %, the centre is at 50%. So to align the centre of the form at the centre, 50-(20/2) = 40.
therefore set your left margin as 40% by doing this :left : 40%;
试试这个：将表单的宽度设置为 20%：width : 20%;
现在，如果整个画布为 100%，则中心为 50%。因此，要将表单的中心对齐在中心，50-(20/2) = 40。因此，通过执行以下操作将左边距设置为 40%：left : 40%;
回答by Akshay
simple way:Add a "center" tag before the form tag
简单的方法：在form标签前加一个“center”标签
回答by carlstarus
<center><form></form></center>
does work in most cases like The Wobbuffet mentioned above...
在大多数情况下确实有效，例如上面提到的 The Wobbuffet...
