Html 居中对齐提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18050468/
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
Center Align Submit button
提问by Pradeep
I have a form with a textarea and submit button.
I floated textarea to left and submit button to right.
我有一个带有 textarea 和提交按钮的表单。
我将 textarea 浮动到左侧并将按钮提交到右侧。
This is how it is displayed in Firefox.
这就是它在 Firefox 中的显示方式。
This is how it is displayed in IE.
这就是它在 IE 中的显示方式。
This is the html code i have written.
这是我写的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>
This is the CSS Code:
这是 CSS 代码：
#form {
overflow: auto;
border: 1px solid black;
width: 600px;
padding-left: 10px;
padding-right: 10px;
}
How to align the submit button verticallyin center with respect to the textarea.?
如何相对于文本区域垂直居中对齐提交按钮。？
ANSWER :
I modified the code to meet my requirements.
解答：
我修改了代码以满足我的要求。
This is the CSS code :
这是 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 Code:
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>
采纳答案by Kalpesh Patel
You can make use of display:tableand display:table-cell, property. But in this case you have to remove floatsand give specific width.
您可以使用display:tableand display:table-cell, 属性。但在这种情况下，您必须删除floats并提供特定宽度。
HTML
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
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:
小提琴：
回答by Mary
You could use position: absoluteon the submit button, and set it 50% from the top, minus half the height of the button in margin-top. See this fiddle:
您可以position: absolute在提交按钮上使用，并将其设置为距顶部的 50%，减去 margin-top 中按钮高度的一半。看到这个小提琴：
回答by Veni
you can give margin-leftor margin-rightproperty.
你可以给予margin-left或margin-right财产。
ex:
前任：
margin-left:135px;
margin-left:135px;
回答by web2008
In this case vertical-align: bottom will not work. Instead height and line-height will make your button to align vertically centered.
在这种情况下，垂直对齐：底部将不起作用。相反，高度和行高将使您的按钮垂直居中对齐。
Included following styles for input:
包括以下输入样式：
height: 80px;
line-height: 70px
Have a look at working demo here: Demo
看看这里的工作演示：演示
回答by max li
Wrap the input with some element and text center align the input.
用一些元素包裹输入，文本中心对齐输入。
<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>
回答by Arun Bertil
Try the Js fiddle
试试 Js 小提琴
#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>
