Nút căn giữa theo chiều dọc bằng cách sử dụng css

Question

Tôi đang cố gắng tạo một nút căn giữa đầu vào đơn giản trong một ô bảng.

đánh dấu của tôi là:

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

Và có thể được xem tại đây:

http://jsfiddle.net/tP4sD/

Tôi đã làm một phiên bản bảng hiển thị cho bạn cách bố trí mà tôi đang cố gắng để đạt được. Lưu ý rằng văn bản được biểu thị bằng "XXXXX" hoặc "YYYYYY" có độ dài thay đổi.

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>

cập nhật 2016:
flexbox http://jsfiddle.net/9knLeab6/1/

Answer 2

Nếu bạn thực hiện nút của bạn một yếu tố inline và thêm text-align: center để phụ huynh td bạn nên sử dụng tốt .

Xem thêm: http://jsfiddle.net/c4urself/NucL9/