Alineación de un botón en el centro

Question

Tengo un botón de envío simple. Quiero alinearlo con el centro. Aquí está mi código:

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

Sin embargo, no funciona. ¿Cuál es la mejor/más fácil manera de hacer esto?

Answer 1

que puedes usar algo como esto:

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

O usted podría utilizar algo como esto. Al dar un ancho al elemento y especificar auto para los márgenes izquierdo y derecho, el elemento se centrará en su elemento primario.

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

Answer 2

margin: 50%; 

Se puede ajustar el porcentaje según sea necesario. Parece funcionar para mí en correos electrónicos receptivos.

Answer 3

Esto es lo que funcionó para mí:

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

Si sólo agrega margen, sin la parte izquierda, se centrará el botón de enviar en el medio de toda la página, por lo que es difícil de encontrar y renderizado su formulario incompleto para las personas que no tienen la paciencia para encontrar un botón de enviar lol. margin-left lo centra dentro de la misma línea, por lo que no está más abajo de lo esperado en su página. También puede usar píxeles en lugar de porcentaje si solo desea aplicar sangría al botón Enviar un poco y no a mitad de camino de la página.

Answer 4

Agregar ancho: 100px, margen: 50%. Ahora el lado izquierdo del botón está en el centro.
Finalmente agregue la mitad de ancho del botón en nuestro caso 50px.
El centro del botón está en el centro.

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

Answer 5

Para mí trabajaron usando FlexBox, que es en mi opinión la solución más limpia.

Añadir una clase css alrededor de la div/elemento padre con:

.parent { 
display: flex; 
} 

y para el uso botón:

.button { 
justify-content: center; 
} 

se debe utilizar un div padre, de lo contrario el botón no hace ' saber 'lo que es el medio de la página/elemento.

Si esto no es trabajar, probar:

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