No HTML, os campos de entrada são usados ​​para criar formulários. Isso permite obter informações do usuário, como nome, endereço e número de telefone. No CSS, você pode estilizar os campos de entrada de várias maneiras, como mudar a cor do campo de entrada, redimensionar, adicionar fronteiras e centralização. Mais especificamente, existem diferentes métodos para alinhar o campo de entrada, incluindo esquerda, direita, centro, superior e inferior.

Neste artigo, aprenderemos como centralizar o campo de entrada usando três métodos diferentes no CSS, que são:

• Centralize um campo de entrada usando “alinhamento de texto”
• Centralize um campo de entrada usando “margem”
• Centralize um campo de entrada usando “grade”

Para alinhar o campo de entrada no centro do elemento HTML; Primeiro, você deve aprender o método para criar o campo de entrada e depois estilizá -lo.

Vamos começar!

Como criar campo de entrada no div usando html?

No HTML, criaremos uma div e atribuiremos a classe “div”Para ele e adicionar um título

dentro da tag. Depois disso, crie uma sub -div e atribua o nome da classe como “entrada”E um campo de entrada nele usando a tag; Defina o tipo de campo de entrada como “texto”, E no espaço reservado, adicione o texto como“Digitar seu nome”. O adicionado desaparecerá quando um usuário digitar qualquer coisa no campo de entrada

Html

Campo de entrada central usando text-align

Na saída abaixo, você pode ver que o campo de entrada é criado com sucesso na div:

Depois disso, vá para CSS para estilizar os elementos HTML.

Como estilizar div usando CSS?

No arquivo CSS, use “.div”Para acessar a div criada em HTML. Então, defina a altura da div como “250px”, Adicione uma cor de fundo como“RGB (134, 240, 227)”E defina a largura da borda como“10px", Estilo como"cume”E cor como“RGB (2, 141, 127)”.

CSS

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

Saída

Agora, verificaremos diferentes métodos para centralizar alinhar um campo de entrada usando CSS.

Método 1: Como centralizar um campo de entrada usando "alinhamento de texto"?

Para centralizar o campo de entrada, utilizaremos o “alinhamento de textoPropriedade do CSS. É utilizado para definir o alinhamento horizontal do texto nos elementos HTML, como esquerda, direita, centro e justificar.

Sintaxe

A sintaxe da propriedade de alinhamento de texto é:

Alinhamento de texto: esquerda | Centro | Justificar

A descrição da sintaxe fornecida acima é dada abaixo:

• esquerda: É o valor padrão da propriedade de alinhamento de texto utilizado para definir o texto no lado esquerdo do elemento HTML.
• certo: É usado para alinhar o texto no lado direito.
• Centro: Especifica o alinhamento central do texto.
• justificar: Ao usá -lo, as palavras são espalhadas em uma linha completa.

Vamos continuar o exemplo e alinhar o campo de entrada no centro da div.

Exemplo

Aqui, vamos usar o “.entrada”Para acessar o sub Div no qual o campo de entrada é criado. Depois disso, definiremos o valor da propriedade de alinhamento de texto como “Centro”Para centralizar o campo de entrada:

.entrada
Alinhamento de texto: centro;

A imagem a seguir mostra que o campo de entrada está alinhado no centro da div:

Método 2: Como centralizar um campo de entrada usando "margem"?

Para criar uma área transparente em torno de um elemento, o “margem”A propriedade do CSS é usada. Esta propriedade permite que você defina a margem de um elemento das laterais esquerda, direita, superior e inferior. É também uma propriedade abreviada de propriedades de margem, margem, margem-direita e margem-esquerda. Em uma linha, você pode definir todos os quatro valores.

Sintaxe

A sintaxe da propriedade de margem é dada abaixo:

Margem: Comprimento | Auto

O "comprimento" e "auto”São os valores da propriedade de margem usada para:

• comprimento: É usado para definir a margem manualmente.
• auto: Ele permite que o navegador defina a margem em torno de um elemento por si só.

Vamos continuar o exemplo e centralizar o campo de entrada.

Exemplo

Considere o exemplo anterior e altere o estilo da fronteira usando a propriedade de fronteira. Depois disso, dentro do “entrada”Classe, use a propriedade Margem para centralizar o alinhamento do campo de entrada. Defina o valor da margem como “auto”E exibi -lo como“bloquear”Para centralizar o campo de entrada. Aqui, usamos o valor da propriedade Display como um bloco porque permite que um elemento seja exibido em um bloco e ocupa toda a largura da linha:

entrada
margem: automático;
exibição: bloco;

Usando o código acima, a seguinte saída é obtida:

Após a implementação bem -sucedida do segundo método, passaremos para o terceiro método.

Método 3: Como centralizar um campo de entrada usando "grade"?

Para centralizar o campo de entrada, usaremos a propriedade Display e definiremos seus valores como “grade”. Ele permite que um elemento seja exibido em um recipiente de grade.

Sintaxe

A sintaxe da propriedade Display é:

Exibição: grade;

Como continuação do exemplo anterior, vamos alinhar o campo de entrada.

Exemplo

Use o ".entrada”Para acessar o sub Div, no qual o campo de entrada é criado e defina o valor da propriedade Display como“grade”Para configurá -lo em um recipiente de grade. Depois disso, defina o recipiente de grade no “Centro”Da div usando a propriedade Justify-Content:

.entrada
Exibição: grade;
Justify-Content: Center;

A saída dada significa que o campo de entrada está alinhado no centro da div:

É isso! Explicamos o método de centralizar um campo de entrada usando CSS.

Conclusão

Os campos de entrada são colocados no centro da div usando três métodos diferentes de CSS, que são os “grade”Valores da propriedade Display, o“alinhamento de texto", e "margem”Propriedades. Essas propriedades permitem que você ajuste os elementos de acordo com seus requisitos. Neste guia, discutimos três métodos para ajustar o campo de entrada no centro.