En HTML, los campos de entrada se utilizan para crear formularios. Esto le permite obtener la entrada del usuario, como el nombre, la dirección y el número de teléfono. En CSS, puede diseñar los campos de entrada de varias maneras, como cambiar el color del campo de entrada, cambiar el tamaño, agregar bordes y centrar. Más específicamente, existen diferentes métodos para alinear el campo de entrada, incluidos.

En este artículo, aprenderemos cómo centrar el campo de entrada utilizando tres métodos diferentes en CSS, que son:

• Centrar un campo de entrada usando "texto alineado"
• Centrar un campo de entrada usando "margen"
• Centrar un campo de entrada usando "red"

Para alinear el campo de entrada en el centro del elemento HTML; Primero, debe aprender el método para crear el campo de entrada y luego diseñarlo.

Vamos a empezar!

Cómo crear campo de entrada en div usando HTML?

En HTML, crearemos un DIV y asignaremos la clase "div"A él y agregar un encabezado

Dentro de la etiqueta. Después de eso, cree un sub div y asigne el nombre de clase como "aporte"Y un campo de entrada en ella usando la etiqueta; Establezca el tipo de campo de entrada como "texto", Y en el marcador de posición, agregue el texto como"Ingresar Su nombre". El agregado desaparecerá cuando un usuario escriba algo en el campo de entrada

Html

Campo de entrada central usando text-align

En la salida a continuación, puede ver que el campo de entrada se crea con éxito en el DIV:

Después de eso, muévase a CSS para diseñar los elementos HTML.

Cómo diseñar Div usando CSS?

En el archivo CSS, use ".div"Para acceder al DIV creado en HTML. Luego, establezca la altura del Div como "250px", Agregue un color de fondo como"RGB (134, 240, 227)"Y establece el ancho de la frontera como"10px", Estilo como"cresta", Y color como"RGB (2, 141, 127)".

CSS

.div
Altura: 250px;
Antecedentes: RGB (134, 240, 227);
borde: 10px cresta RGB (2, 141, 127);

Producción

Ahora, verificaremos diferentes métodos para alinear un campo de entrada utilizando CSS.

Método 1: Cómo centrar un campo de entrada utilizando "Alineación de texto"?

Para centrar el campo de entrada, utilizaremos el "texto alineado"Propiedad de CSS. Se utiliza para establecer la alineación horizontal del texto en los elementos HTML como izquierda, derecha, centro y justificar.

Sintaxis

La sintaxis de la propiedad de alineación de texto es:

Text-Align: Izquierda | Derecha | Centro | Justificar

La descripción de la sintaxis proporcionada anteriormente se da a continuación:

• izquierda: Es el valor predeterminado de la propiedad de alineación de texto utilizada para establecer el texto en el lado izquierdo del elemento HTML.
• bien: Se usa para alinear el texto en el lado derecho.
• centro: Especifica la alineación central del texto.
• justificar: Al usarlo, las palabras se extienden en una línea completa.

Continuemos el ejemplo y alineemos el campo de entrada en el centro del div.

Ejemplo

Aquí, usaremos el ".aporte"Para acceder al sub div en el que se crea el campo de entrada. Después de eso, estableceremos el valor de la propiedad de alineación de texto como "centro"Para centrar el campo de entrada:

.aporte
Text-Align: Center;

La siguiente imagen muestra que el campo de entrada está alineado en el centro del DIV:

Método 2: Cómo centrar un campo de entrada utilizando "margen"?

Para crear un área transparente alrededor de un elemento, el "margenSe utiliza la propiedad del CSS. Esta propiedad le permite establecer el margen de un elemento desde los lados izquierdo, derecho, superior e inferior. También es una propiedad abreviada de propiedades de margen, margen de margen, margen-derecho y margen-izquierda-izquierda. En una línea, puede establecer los cuatro valores.

Sintaxis

La sintaxis de la propiedad de margen se proporciona a continuación:

Margen: Longitud | Auto

El "longitud" y "auto"Son los valores de la propiedad de margen utilizada para:

• longitud: Se usa para establecer el margen manualmente.
• auto: Permite que el navegador establezca el margen alrededor de un elemento por sí mismo.

Continuemos el ejemplo y centremos el campo de entrada.

Ejemplo

Considere el ejemplo anterior y cambie el estilo del borde utilizando la propiedad fronteriza. Después de eso, dentro del "aporteClase ", use la propiedad de margen para alinear el campo de entrada. Establezca el valor del margen como "auto"Y mostrarlo como"bloquear"Para centrar el campo de entrada. Aquí, hemos utilizado el valor de la propiedad de visualización como bloque porque permite que un elemento se muestre en un bloque y ocupa todo el ancho de la línea:

aporte
margen: auto;
bloqueo de pantalla;

Usando el código anterior, se obtiene la siguiente salida:

Después de la implementación exitosa del segundo método, pasaremos al tercer método.

Método 3: Cómo centrar un campo de entrada usando "cuadrícula"?

Para centrar el campo de entrada, utilizaremos la propiedad de visualización y estableceremos sus valores como "red". Permite que un elemento se muestre en un contenedor de cuadrícula.

Sintaxis

La sintaxis de la propiedad de visualización es:

Pantalla: cuadrícula;

Como continuación del ejemplo anterior, alineemos el centro de la entrada del campo de entrada.

Ejemplo

Utilizar el ".aporte"Para acceder al sub div en el que se crea el campo de entrada y establece el valor de la propiedad de visualización como"red"Para configurarlo en un contenedor de cuadrícula. Después de eso, configure el contenedor de la cuadrícula en el "centro"De la DIV utilizando la propiedad Justify-Content:

.aporte
Pantalla: cuadrícula;
Justify-Content: Center;

La salida dada significa que el campo de entrada está alineado en el centro del DIV:

Eso es todo! Hemos explicado el método de centrar un campo de entrada utilizando CSS.

Conclusión

Los campos de entrada se colocan en el centro del DIV utilizando tres métodos diferentes de CSS, que son los "red"Valores de la propiedad de visualización, el"texto alineado", y "margen" propiedades. Estas propiedades le permiten ajustar los elementos según sus requisitos. En esta guía, hemos discutido tres métodos para ajustar el campo de entrada en el centro.