Centralizar um formulário em HTML

1. Use a propriedade CSS margin para centralizar um formulário em HTML
2. Use a propriedade CSS text-align para centralizar um formulário em HTML
3. Use as propriedades CSS width e margin-left para centralizar um formulário em HTML

Este artigo apresentará métodos para centralizar um formulário em HTML.

Use a propriedade CSS margin para centralizar um formulário em HTML

Podemos usar a propriedade CSS margin para centralizar um formulário em HTML.

Os estilos podem ser escritos como um CSS embutido na tag form. A propriedade margin define o espaço entre o contêiner e os elementos adjacentes.

Primeiro, podemos fornecer o valor para definir uma margem para a propriedade. Quando usamos um único valor, o valor se aplica a todas as quatro direções do contêiner.

A seguir, podemos usar o valor auto para a propriedade margin para centralizar o formulário. Para isso, devemos fornecer uma width do formulário para que ela seja ajustada no centro com a largura dada.

O valor auto irá dividir a distância restante igualmente da esquerda e da direita.

Por exemplo, crie uma tag form e escreva o atributo style nela. No atributo style, defina a propriedade margin como auto e a propriedade width como 220px.

Em seguida, crie uma tag input de text e outra tag input de submit.

O exemplo abaixo criará um formulário centralizado. O formulário tem uma largura de 220px e o espaço restante é dividido nas margens esquerda e direita.

Desta forma, podemos criar um formulário com alinhamento central com margin:auto usando CSS em HTML.

Código de exemplo:

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

Use a propriedade CSS text-align para centralizar um formulário em HTML

Usamos a propriedade text-align para especificar o alinhamento do texto em CSS. Podemos usar a propriedade como um estilo embutido da tag form para definir o alinhamento do formulário.

A propriedade text-align assume os valores como left, right, center, justify, etc. Podemos definir o valor como center para centrar o formulário.

Por exemplo, aplique a propriedade text-align à tag form no atributo style e defina a propriedade como center. Em seguida, crie tags input com o tipo text e depois submit.

O exemplo abaixo irá centralizar todo o conteúdo do formulário. No entanto, o formulário ocupa todo o bloco, pois nenhuma margem foi especificada.

Desta forma, podemos centralizar o formulário em HTML.

Código de exemplo:

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

Use as propriedades CSS width e margin-left para centralizar um formulário em HTML

Podemos definir a largura do formulário como 50% da largura da janela de visualização e, em seguida, podemos fornecer 25% da largura como margem à esquerda. Podemos usar as propriedades CSS width e margin-left para definir a largura e a margem e atingir o nosso objetivo.

Finalmente, podemos usar a unidade vw para especificar o comprimento. Por exemplo, defina width como 50vw e margin-left como 25vw como o atributo style da etiqueta form.

Aqui, o valor 50vw ocupará 50% da largura da janela de visualização e o valor 25vw fornecerá 25% da largura da janela de visualização como margem esquerda. Os 25% restantes de espaço estarão à direita do formulário.

Desta forma, podemos centralizar um formulário em HTML.

Código de exemplo:

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