2013-03-08 14 views

risposta

54
button { 
    margin:0 auto; 
    display:block; 
} 

jsFiddle example

+0

Se si utilizza questo nel mondo reale, è necessario aumentare la specificità di che se non si desidera che l'elemento tasto centrato in tutto il mondo. –

+0

Ho una domanda. L'elemento di blocco utilizzerà la larghezza completa dell'elemento principale. Vedi http://jsfiddle.net/xmpDD/1. Perché l'elemento button non usa la larghezza completa dell'elemento div. La verità è che la larghezza dell'elemento del pulsante è 54 pixel. Non riesco a capirlo. Grazie! – weilou

+0

Il '0' è effettivamente necessario? 'margin: auto;' sembra funzionare in FF, IE e Chrome. –

2

È necessario display: block; margin: auto; sul <button>. jsFiddle

+0

Ho una domanda. L'elemento di blocco utilizzerà la larghezza completa dell'elemento principale. Vedi http://jsfiddle.net/xmpDD/1. Perché l'elemento button non usa la larghezza completa dell'elemento div. La verità è che la larghezza dell'elemento del pulsante è 54 pixel. Non riesco a capirlo. Grazie! – weilou

+1

@weilou In realtà, gli elementi a livello di blocco non ottengono necessariamente la larghezza del loro genitore. La loro larghezza, i margini e il padding combinati equivalgono alla larghezza del loro genitore. Spero che abbia aiutato! –

+0

Grazie mille! Filippo. Il tuo commento mi aiuta! – weilou

3

Altri hanno già detto il metodo margin: 0 auto;, ma se si voleva una spiegazione, il browser si divide lo spazio a disposizione in qualsiasi contenitore vostro elemento è in.

anche importante sottolineare è probabilmente vi devi anche dare una larghezza al tuo elemento affinché funzioni correttamente.

Quindi, nel complesso:

button { 
    display:inline-block; //Typically a button wouldn't need its own line   
    margin:0 auto; 
    width: 200px; //or whatever 
}