Pulsante di centratura verticale tramite css

Question

Sto provando a creare un semplice pulsante di allineamento al centro all'interno di una cella di tabella.

mio markup è:

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

E può essere vista qui:

http://jsfiddle.net/tP4sD/

ho fatto una versione da tavolo che vi mostra il layout che sto cercando di realizzare. Si noti che il testo rappresentato da "XXXXX" o "YYYYYY" è di lunghezza variabile.

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>

aggiornamento 2016:
FlexBox http://jsfiddle.net/9knLeab6/1/

Answer 2

Se si effettua il pulsante un elemento inline e aggiungere text-align: center al genitore td si dovrebbe andare bene .

Consulta anche: http://jsfiddle.net/c4urself/NucL9/