Przycisk wycentrowania w pionie za pomocą css

Question

Próbuję wykonać prosty przycisk wprowadzania środkowego wyrównania w komórce tabeli.

Moja znaczników jest:

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

I można obejrzeć tu:

http://jsfiddle.net/tP4sD/

Zrobiłem wersję tabeli pokazujące układ, który próbuję osiągnąć. Zwróć uwagę, że tekst reprezentowany przez "XXXXX" lub "YYYYYY" ma różną długość.

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>

aktualizacja 2016:
schematu flexbox http://jsfiddle.net/9knLeab6/1/

Answer 2

Jeśli dokonać przycisk elementu inline i dodać text-align: center do rodzica td powinno być w porządku .

Zobacz także: http://jsfiddle.net/c4urself/NucL9/