<div>
<button>Button</button>
</div>
Non voglio aggiungere codici CSS all'elemento div. Quindi, <div style="text-align: center;"> non è quello che voglio. Voglio solo aggiungere codici CSS all'elemento button. Non voglio aggiungere codici JS. È possibile utilizzare CSS3. Grazie!Come si può rendere un elemento del pulsante visualizzato orizzontalmente nell'allineamento del centro in un elemento div?
button {
margin:0 auto;
display:block;
}
È necessario display: block; margin: auto; sul <button>. jsFiddle
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
@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! –
Grazie mille! Filippo. Il tuo commento mi aiuta! – weilou
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
}
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. –
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
Il '0' è effettivamente necessario? 'margin: auto;' sembra funzionare in FF, IE e Chrome. –