垂直居中按鈕使用css

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/

.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：
Flexbox的http://jsfiddle.net/9knLeab6/1/

Answer 2

如果你讓你的按鈕的inline元素，並添加text-align: center父td你應該罰款。

另請參閱：http://jsfiddle.net/c4urself/NucL9/