div con display: margine blocco in linea 0 auto non centrato

Question

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

Provo ad usare il codice sopra per impostare la larghezza di uguale contenuto, quindi centrarlo con margine: 0 auto;

Ma non ha funzionato per me su nessun browser. Qualche suggerimento?

BTW, quando imposto la proprietà width, funziona correttamente.

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

Answer 1

display: tabella; avrebbe posizionarlo nel centro troppo:

CSS:

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

HTML:

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

Nota: Utilizzando gli stili inline è una cattiva pratica.

Answer 2

Poiché è stata richiesta DIV di essere inline-block, text-align: center; è la risposta.

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

Answer 3

Prova

body {text-align: center;}