div con display: margen inline-block 0 auto no centrar

Question

<div style="display: inline-block; margin: 0 auto;"> 
    <input id="abc" type="button" value="button" /> 
</div> 

intento utilizar el código anterior para establecer el ancho de la igualdad de su contenido y, a continuación, centrarlo con margin: 0 auto;

Pero no funcionó para mí en ningún navegador. ¿Cualquier sugerencia?

Por cierto, cuando establezco la propiedad width, funciona bien.

<div style="width: 10em; margin: 0 auto;"> 
    <input id="abc" type="button" value="button" /> 
</div> 

Answer 1

display: table; sería colocarlo en el centro también:

CSS:

.button{ 
    display: table; 
    margin: 0 auto; 
    } 

HTML:

<div class="button"> 
<input id="abc" type="button" value="button" /> 
< /div> 

Nota: El uso de estilos en línea es una mala práctica.

Answer 2

desde que pidió DIV para ser inline-block, text-align: center; es la respuesta.

<div style="text-align: center;"> 
<div style="display: inline-block; text-align: left;"> 
    <input id="abc" type="button" value="button" /> 
</div> 
</div> 

Answer 3

Trate

body {text-align: center;}