Allineare un pulsante al centro

Question

Ho un semplice pulsante di invio. Sto volendo allinearlo al centro. Ecco il mio codice:

<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center"> 

Tuttavia, non funziona. Qual è il modo migliore/più semplice per farlo?

Answer 1

si dovrebbe usare qualcosa di simile a questo:

<div style="text-align:center"> 
    <input type="submit" /> 
</div> 

Oppure si potrebbe usare qualcosa di simile. Dando all'elemento una larghezza e specificando auto per i margini sinistro e destro, l'elemento si centrerà nel suo genitore.

<input type="submit" style="width: 300px; margin: 0 auto;" /> 

Answer 2

margin: 50%; 

È possibile regolare la percentuale in base alle esigenze. Sembra funzionare per me in email reattive.

Answer 3

Ecco cosa ha funzionato per me:

<input type="submit" style="margin-left: 50%"> 

Se si aggiunge solo il margine, senza la parte sinistra, sarà centrare il pulsante di invio verso il centro della vostra intera pagina, rendendo difficile da trovare e il rendering la tua forma è incompleta per le persone che non hanno la pazienza di trovare un pulsante di invio lol. margin-left centra all'interno della stessa linea, quindi non è più in basso nella tua pagina di quanto tu non intenda. È anche possibile utilizzare i pixel anziché la percentuale se si desidera solo un rientro del pulsante di invio e non fino a metà della pagina.

Answer 4

Aggiungi larghezza: 100px, margine: 50%. Ora il lato sinistro del pulsante è impostato al centro.
Infine aggiungi la metà dello larghezza del pulsante nel nostro caso 50px.
Il centro del pulsante è al centro.

<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'> 

Answer 5

Per me ha funzionato usando FlexBox, che è a mio parere la soluzione più pulita.

aggiungere una classe CSS intorno al div/elemento genitore con:

.parent { 
display: flex; 
} 

e per l'uso tasto:

.button { 
justify-content: center; 
} 

è necessario utilizzare un div genitore, altrimenti il ​​pulsante non lo fa ' sapere 'qual è il centro della pagina/elemento.

Se questo è non funziona, provare:

#wrapper { 
    display:flex; 
    justify-content: center; 
}