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

Demo Here

Answer 3

CSS可能永远不会让我感到惊讶。鉴于Dhaval Marthak的答案，我实际上能够实现我想要的，右对齐标签和左对齐字段（当然在标签的右侧）：

forever cleanlogs    [CAREFUL] Deletes all historical forever log files

JSfiddle仍指出我的遗留问题，如果标签破坏了该字段，该字段将与标签的底部对齐。但我相信也可以修改。

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

Answer 4

上面提供的所有解决方案都不适用于我的实际项目，我想在其中垂直和水平地将一个表单放在div中（不作为整个页面的参考）但我使用display: flex;得到它属性。只需将您的父div显示为flex，然后为您的孩子margin: auto;使用属性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 5

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

然后表单将水平居中

垂直对齐html表单

5 个答案: