Botón de centrado vertical usando css

Question

Estoy tratando de hacer que un botón de entrada simple se alinee en el centro dentro de una celda de la tabla.

Mi marcado es:

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

Y se puede ver aquí:

http://jsfiddle.net/tP4sD/

he hecho una versión tabla que muestra la disposición de que yo estoy tratando de lograr. Tenga en cuenta que el texto representado por "XXXXX" o "YYYYYY" es de longitud variable.

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>

actualización 2016:
FlexBox http://jsfiddle.net/9knLeab6/1/

Answer 2

Si usted hace su botón de un elemento inline y añadir text-align: center al padre td que debe estar bien .

Consulte también: http://jsfiddle.net/c4urself/NucL9/