Question

我正在尝试在表格单元格中对齐一个简单的输入按钮。

我的标记是：

<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;">

可以在这里查看：

http://jsfiddle.net/tP4sD/

我已经完成了一个表格版本，显示了我想要实现的布局。请注意，“XXXXX”或“YYYYYY”表示的文本长度可变。

Answer 1

http://jsfiddle.net/8v8gLn4y/

＆＃13;

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

＆＃13;

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

＆＃13;

2016年更新：
flexbox http://jsfiddle.net/9knLeab6/1/

Answer 2

如果您将按钮设为inline元素并将text-align: center添加到父td，那么您应该没问题。

另请参阅：http://jsfiddle.net/c4urself/NucL9/

使用css垂直居中按钮

2 个答案: