html - 垂直对齐html表单

Question

我希望将此文本框居中并在页面上垂直和水平地提交按钮，但以下代码只是将它放在顶部中心。我怎样才能把它放在页面中心？就像它忽略了垂直对齐设置。

<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>

Answer 1

您可以使用position:absolute演示http://jsfiddle.net/kevinPHPkevin/U8dZr/

div#form-wrapper {
    position:absolute;
    top:50%;
    right:0;
    left:0;
}

Answer 2

你也可以这样做：

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

#main
{
  line-height: 400px;
  text-align:center; 
  vertical-align:middle;
}

#frm
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; 
}

在这里演示

Answer 3

上面提供的解决方案都不适用于我的真实项目，在该项目中，我想在 div 内垂直和水平地居中一个表单（不作为整页的参考），但我使用display: flex;属性得到了它。只需将您的 parent 显示div为flex，然后margin: auto;为您的 child使用该属性form。

在你的情况下，它会是这样的：

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>

CSS代码：

html, body{
  height: 100%;
  width: 100%;
  margin: 0;
}

#centeringDiv{
  height: 100%;
  width: 100%;
  display: flex;
}

#mainForm{
  margin: auto;
}

JSFiddle，您可以在其中看到它在整个页面中垂直和水平居中的形式。

Answer 4

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;
}

JSfiddle仍然指出了我剩下的问题，如果标签断线，该字段将与标签底部对齐。但我相信这也可以修改。

当然，如果可以根据标签的大小（例如以不同的语言）更“动态地”分配标签和字段之间的空间，那也很好，但到目前为止我还没有看到这样做的任何地方。我想如果我真的需要它，我将不得不求助于桌子。

Answer 5

您必须将宽度从“100%”更改为“px”，然后您必须执行边距：“auto”。

然后表格将水平居中。