2012-04-02 6 views
12

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

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

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

risposta

27

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;" /> 
+6

Questo non è giusto. Hai pubblicato due diversi modi per svolgere l'attività. Uno di questi è corretto, l'altro sbagliato. Puoi usare 'text-align: center' sul genitore che è corretto. Ma potrebbe non volere che tutto nel genitore sia centrato. Aggiungerlo solo per il centraggio sarebbe spreco di markup. L'aggiunta di 'margin: 0 auto;' a questa soluzione non è necessaria. Questo è un metodo separato. Richiede che il pulsante di invio abbia definito un 'width'. Dovresti correggere la tua risposta attuale e pubblicare probabilmente anche la seconda soluzione. – mrtsherman

0
margin: 50%; 

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

1

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.

0

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;'> 
0

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; 
} 
Problemi correlati