居中对齐提交按钮答案

【问题标题】：Center Align Submit button居中对齐提交按钮
【发布时间】：2013-08-05 16:56:35
【问题描述】：

我有一个带有文本区域和提交按钮的表单。
我将 textarea 浮动到左侧并将按钮提交到右侧。

这是它在 Firefox 中的显示方式。

这就是它在IE中的显示方式。

这是我写的html代码。

<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; float: left;"></textarea>
   <input type="submit" style="width: 100px; float: right;" />
  </form>
</div>

这是 CSS 代码：

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}

如何将提交按钮垂直相对于文本区域居中对齐？

回答：
我修改了代码以满足我的要求。

这是 CSS 代码：

#form {
  overflow: auto;
  border: 1px solid black;
  width: 600px;
  padding-left: 10px;
 padding-right: 10px;
  }
 #form  textarea {
   vertical-align: middle;
  }
 #form span{
   display: inline-block;
   vertical-align: middle;
  margin-left: 40px;
}

HTML 代码：

 <div id="form">
    <form method="post" action="google.php">
    <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
    <span><input type="submit" value="Comment"  /></span> </form>
 </div>

【问题讨论】：

标签： html css button alignment submit

【解决方案1】：

您可以使用display:table 和display:table-cell 属性。但在这种情况下，您必须删除 floats 并指定特定宽度。

HTML

<div id="form">
  <form method="post" action="google.php">
      <div class='wrap'>
   <textarea rows="3" cols="40"></textarea>
      </div>
       <div class='wrap_2'>
<input type="submit"/>
      </div>
  </form>
</div>

CSS

#form{
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
 display:table;
}

div.wrap, 
div.wrap_2 {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

div.wrap {
    width:500px 
}

小提琴：

http://jsfiddle.net/7gnMu/

【讨论】：

【解决方案2】：

您可以在提交按钮上使用position: absolute，并将其设置为距顶部50%，减去顶部边缘按钮高度的一半。看到这个小提琴：

http://jsfiddle.net/cXSbX/

【讨论】：

【解决方案3】：

你可以给margin-left或margin-right属性。

例如：

margin-left:135px;

【讨论】：

【解决方案4】：

用一些元素包裹输入并且文本中心对齐输入。

<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; float: left;"></textarea>
      <span class="right" style="width: 278px; float: right; text-align:center;"><input type="submit" display:inline-block; /></span>
  </form>
</div>

http://jsfiddle.net/UuFg2/

【讨论】：

对不起..我希望它在中心垂直对齐。

【解决方案5】：

试试 Js 小提琴

http://jsfiddle.net/wZs2F/

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}
.txtinput
{
 margin-left:100px;
}


<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
      <div class="txtinput">
   <input type="submit" style="width: 100px;"  />
          </div>
  </form>
</div>

【讨论】：

【解决方案6】：

在这种情况下，垂直对齐：底部将不起作用。相反，高度和行高将使您的按钮垂直居中对齐。

包括以下输入样式：

height: 80px; 
line-height: 70px

在这里查看工作演示：Demo

【讨论】：