使用css垂直居中按钮答案

【问题标题】：Vertically centering button using css使用css垂直居中按钮
【发布时间】：2012-02-05 21:06:21
【问题描述】：

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

我的标记是：

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

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

【问题讨论】：

标签： html css layout

【解决方案1】：

http://jsfiddle.net/8v8gLn4y/

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

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>

【讨论】：

感谢您的帮助，这让我快疯了。您的解决方案完美运行。 :)
如果我将更改为
@Hoang 您必须将 html 中的这一行 <input type="button" value="submit" /> 更改为 <button>click me</button>

【解决方案2】：

如果您将按钮设置为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>

【讨论】：

OP 想要一个不使用表格的解决方案