Html 垂直对齐html表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16626240/
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
vertical align html form
提问by user441521
I'm looking to center this textbox and submit button on the page both vertically and horizontally but the following code just puts it in the top center. How can I center this to the page? It's like it's ignoring the vertical-align setting.
我希望将此文本框居中并在页面上垂直和水平地提交按钮，但以下代码只是将其放在顶部中心。如何将其居中显示在页面上？这就像忽略了垂直对齐设置。
<div style="text-align:center; vertical-align:middle">
<form action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
回答by Kevin Lynch
You can use position:absoluteDEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/
您可以使用position:absolute演示http://jsfiddle.net/kevinPHPkevin/U8dZr/
div#form-wrapper {
position:absolute;
top:50%;
right:0;
left:0;
}
回答by Dhaval Marthak
You can also go for this:
你也可以这样做：
HTML
HTML
<div id="main" >
<form id="frm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSS
CSS
#main
{
line-height: 400px;
text-align:center;
vertical-align:middle;
}
#frm
{
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
回答by Francisco Romero
None of the solutions provided above worked for me for my real proyect in which I wanted to center both vertically and horizontally a form inside a div (not taking as reference the full page) but I got it using display: flex;property. Just display your parent divas flexand then use the property margin: auto;for your child form.
上面提供的任何解决方案都不适用于我的真实项目，我想在 div 中垂直和水平居中一个表单（不作为整个页面的参考），但我使用display: flex;属性获得了它。只需将您的父母显示div为flex，然后margin: auto;为您的孩子使用该属性form。
In your case, it would be like this:
在你的情况下，它会是这样的：
HTMLcode:
HTML代码：
<div id="centeringDiv" style="display: flex;">
<form id="mainForm" action="save_thought.php" method="post">
<input type="text" name="thought"><br>
<input type="submit" value="Submit">
</form>
</div>
CSScode:
CSS代码：
html, body{
height: 100%;
width: 100%;
margin: 0;
}
#centeringDiv{
height: 100%;
width: 100%;
display: flex;
}
#mainForm{
margin: auto;
}
JSFiddlein which you can see that the form it is being centered both vertically and horizontally in the full page.
您可以在JSFiddle中看到它在整个页面中垂直和水平居中的表单。
回答by ilias
You have have to change the width from "100%" to "px" and then you have to do margin: "auto".
您必须将宽度从“100%”更改为“px”，然后您必须执行 margin:“auto”。
Then the form will be centered horizontally.
然后表单将水平居中。
回答by Patru
CSS will probably never stop to amaze me. Given Dhaval Marthak's answer I was actually able to achieve what I wanted, right aligned labels and left aligned fields (on the right of the labels of course):
CSS 可能永远不会停止让我惊讶。鉴于 Dhaval Marthak 的回答，我实际上能够实现我想要的，右对齐标签和左对齐字段（当然在标签的右侧）：
label {
display: block;
position:relative;
text-align: right;
width: 100px;
margin: 0 0 5px 0;
}
label > input,
label > select,
input {
position: absolute;
left: 120px;
}
The JSfiddlestill points out my remaining problem, the field will align with the bottomof the label if the label breaks the line. But I am sure that can be amended as well.
该的jsfiddle还指出我剩下的问题，本场将与对齐底部的标签如果标签打破了线。但我相信这也可以修改。
Of course it would also be nice if the space between labels and fields could be assigned more "dynamically" based on the sizes of the labels (e.g. in different languages) but I have not seen this done anywhere so far. I guess I will have to resort to tables if I really need it.
当然，如果标签和字段之间的空间可以根据标签的大小（例如，使用不同的语言）更“动态地”分配，那也会很好，但到目前为止我还没有在任何地方看到这样做过。我想如果我真的需要它，我将不得不求助于桌子。
