Html 使用css垂直居中按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8786583/
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
Vertically centering button using css
提问by Dino
I am trying to make a simple input button center-align within a table cell.
我正在尝试在表格单元格中制作一个简单的输入按钮中心对齐。
My markup is:
我的标记是：
<table width="500" border="1">
<tr>
<td width="390">XXXXXXXXX</td>
<td width="110" rowspan="2" valign="middle"><input type="button" value="submit"></td>
</tr>
<tr>
<td>YYYYYYYY</td>
</tr>
</table>
<br /><br />
<div style="width:500px;">
<div style="float:left;width:390px;">
<div>XXXXXXX</div>
<div>YYYYYYY</div>
</div>
<div style="vertical-align:middle;width:110px;float:right;">
<div><input type="button" value="submit"></div>
</div>
</div>I have done a table version showing you the layout that I am trying to achieve. Note that the text represented by "XXXXX" or "YYYYYY" is of variable length.
我已经完成了一个表格版本，向您展示了我试图实现的布局。请注意，由“XXXXX”或“YYYYYY”表示的文本长度可变。
回答by sqram
.container {
background: lightblue;
display: table;
width:100%;
}
input[type=button] {
display: block;
width: 50%;
margin: 0 auto;
}
.button-wrapper {
background: darkorange;
display: table-cell;
vertical-align: middle;
}<div class='container'>
<div>some line with text</div>
<div>another line with text</div>
<div class='button-wrapper'>
<input type="button" value="submit" />
</div>
</div>update 2016:
flexbox
2016 年更新：
弹性盒
.container {
background: bisque;
display: flex;
width: 100%;
}
.container>div {
flex-grow: 1;
}
.button-wrapper {
background: chocolate;
display: flex;
flex-direction: column;
justify-content: center;
}
input[type=button] {
display: block;
width: 50%;
margin: 0 auto;
flex-shrink: 1;
}<div class='container'>
<div>
<p>some line with text</p>
<p>another line with text</p>
</div>
<div class='button-wrapper'>
<input type="button" value="submit" />
</div>
</div>回答by c4urself
If you make your button an inlineelement and add text-align: centerto the parent tdyou should be fine.
如果你让你的按钮成为一个inline元素并添加text-align: center到父元素，td你应该没问题。
.tools {
text-align: center;
}
.submit {
display: inline;
}<table width="500" border="1">
<tr>
<td width="390">XXXXXXXXX</td>
<td class="tools" width="110" rowspan="2" valign="middle"><input class- "submit" type="button" value="submit"></td>
</tr>
<tr>
<td>YYYYYYYY</td>
</tr>
</table>
<br /><br />
<div style="width:500px;">
<div style="float:left;width:390px;">
<div>XXXXXXX</div>
<div>YYYYYYY</div>
</div>
<div style="vertical-align:middle;width:110px;float:right;">
<div><input type="button" value="submit"></div>
</div>
</div>