中心对齐提交按钮

Question

我有一个带有textarea和提交按钮的窗体。
我将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; 
} 

如何对齐相对于textarea的提交按钮垂直的中心？

答案：
我修改了代码以符合我的要求。

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

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

FIDDLE：

http://jsfiddle.net/7gnMu/

Answer 2

总结了一些元素和文本中心输入校准输入。

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

Answer 3

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

Answer 4

你可以提交按钮使用position: absolute，并且从顶部将其50％，减去一半的高度按钮的边缘。看到这个小提琴：

http://jsfiddle.net/cXSbX/

Answer 5

在这种情况下，垂直对齐：底部将无法正常工作。相反，高度和线高将使您的按钮垂直居中对齐。输入

包括以下类型：

height: 80px; 
line-height: 70px 

看一看演示在这里工作：Demo

Answer 6

你可以给margin-left或margin-right财产。

例如：

margin-left:135px;