Centrar un formulario en HTML

1. Utilice la propiedad CSS margin para centrar un formulario en HTML
2. Utilice la propiedad CSS text-align para centrar un formulario en HTML
3. Utilice las propiedades de CSS width y margin-left para centrar un formulario en HTML

Este artículo presentará métodos para centrar un formulario en HTML.

Utilice la propiedad CSS margin para centrar un formulario en HTML

Podemos usar la propiedad CSS margin para centrar un formulario en HTML.

Los estilos se pueden escribir como CSS en línea en la etiqueta form. La propiedad margin define el espacio entre el contenedor y los elementos adyacentes.

Primero, podemos proporcionar el valor para establecer un margen para la propiedad. Cuando usamos un solo valor, el valor se aplica a las cuatro direcciones del contenedor.

A continuación, podemos utilizar el valor auto de la propiedad margin para centrar el formulario. Para ello, debemos proporcionar un width del formulario para que se ajuste en el centro con el ancho dado.

El valor auto dividirá la distancia restante por igual entre la izquierda y la derecha.

Por ejemplo, cree una etiqueta form y escriba el atributo style en ella. En el atributo de estilo, establezca la propiedad margin en auto y la propiedad width en 220px.

A continuación, cree una etiqueta de input de text y otra etiqueta de input de submit.

El siguiente ejemplo creará un formulario centrado. El formulario tiene un ancho de 220px y el espacio restante se divide en márgenes izquierdo y derecho.

De esta forma, podemos crear un formulario con alineación central con margin:auto usando CSS en HTML.

Código de ejemplo:

<form style="margin: auto; width: 220px;">
    Enter name:<input type="text" />
    <input type="submit" value="Submit"/>
</form>

Utilice la propiedad CSS text-align para centrar un formulario en HTML

Usamos la propiedad text-align para especificar la alineación del texto en CSS. Podemos usar la propiedad como un estilo en línea de la etiqueta form para establecer la alineación del formulario.

La propiedad text-align toma valores como left, right, center, justify, etc. Podemos establecer el valor center para centrar el formulario.

Por ejemplo, aplique la propiedad text-align a la etiqueta form en el atributo style y establezca la propiedad en center. A continuación, cree etiquetas de input con el tipo text y luego submit.

El siguiente ejemplo centrará todos los contenidos del formulario. Sin embargo, el formulario ocupa todo el bloque ya que no se ha especificado ningún margen.

De esta forma, podemos centrar el formulario en HTML.

Código de ejemplo:

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

Utilice las propiedades de CSS width y margin-left para centrar un formulario en HTML

Podemos establecer el ancho del formulario como el 50% del ancho de la ventana gráfica, y luego podemos proporcionar el 25% del ancho como margen a la izquierda. Podemos usar las propiedades CSS width y margin-left para establecer el ancho y el margen y lograr nuestro objetivo.

Finalmente, podemos usar la unidad vw para especificar la longitud. Por ejemplo, establezca width en 50vw y margin-left en 25vw como el atributo style de la etiqueta form.

Aquí, el valor 50vw ocupará el 50% del ancho de la ventana gráfica, y el valor 25vw dará el 25% del ancho de la ventana gráfica como margen izquierdo. El espacio restante del 25% estará a la derecha del formulario.

De esta forma, podemos centrar un formulario en HTML.

Código de ejemplo:

<form style=" width: 50vw; margin-left : 25vw;">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>