Como alinhar horizontal e verticalmente usando CSS?

Este guia demonstra o procedimento para alinhamento horizontal e vertical usando CSS.

• Alinhamento horizontal
• Alinhamento vertical

Como alinhar horizontal e verticalmente usando CSS?

Os desenvolvedores usam o alinhamento “horizontal” e “vertical” para organizar e posicionar os elementos em uma página da web de maneira mais organizada. Podem ser úteis no alinhamento de elementos, conteúdos, posicionamento de botões ou ícones, etc. Siga os exemplos abaixo para melhor entendimento:

Alinhamento horizontal

Em CSS, a propriedade text-align é usada para alinhar horizontalmente o texto dentro de seu elemento pai. Visite os trechos de código abaixo para entender melhor:

No trecho de código acima:

• Primeiro, o pai “ div ” elemento é utilizado com um atributo de classe com um valor de “ conta ”.
• Em seguida, três elementos filho foram criados e o atributo class foi atribuído a cada div.
• No final, os valores de “leftAlign”, “centerAlign” e “rightAlign” são fornecidos às classes.

Agora, insira as seguintes propriedades CSS no “ ' marcação:

No bloco de código acima:

• Primeiro, todas as três classes são selecionadas separadamente e, em seguida, aplicam-se as propriedades CSS “ mostrar ”, “ largura ”, “ cor de fundo ' e ' preenchimento ' para eles. Essas propriedades são utilizadas para aprimorar os propósitos de visualização.
• Em seguida, os valores de “ esquerda ”, “ Centro ' e ' certo ” são fornecidos ao “ alinhamento de texto ” propriedade para o “ leftAlign ”, “ centralizar ', e ' rightalign ” aulas, respectivamente.

Após o processo de compilação, os elementos HTML ficam assim:

O instantâneo acima do navegador mostra que os elementos estão alinhados horizontalmente nas posições esquerda, central e direita.

Alinhamento vertical

O CSS “ alinhamento vertical ” propriedade alinha o elemento selecionado para o “ eixo y ” dentro de seu elemento pai. Os valores possíveis para a propriedade “vertical-align” são “ linha de base ”, “ sub ”, “ super ”, “ principal ”, “ topo de texto ”, “ meio ”, “ fundo ', e ' texto inferior ”. No entanto, os desenvolvedores usam principalmente os valores “top”, “middle” e “bottom” ao criar designs de páginas da web. Para alinhar o elemento HTML selecionado na posição superior, visite o trecho de código abaixo:

No trecho de código acima:

• Primeiro, crie um pai “ div ” e atribua um valor de “ contar ' para o ' aula ” atributo.
• Dentro do contêiner pai, utilize o “ ” e forneça o caminho da imagem como um valor para a tag “ origem ” atributo.
• Além disso, forneça o valor de “ 200px ” para ambos os “ largura ' e ' altura ” atributos do “ ' marcação.
• Em seguida, utilize o “ ” e forneça a ela uma classe de “ captionTopAlign ”. No final, forneça dados fictícios a ele.

Agora, adicione propriedades CSS para estilizar os elementos HTML:

No bloco de código acima:

• Primeiro, selecione o pai “ contar ” e forneça os valores de “fit-content”, “block”, “100px”, “10px” e “2px solid red” para o CSS “ largura ”, “ mostrar ”, “ margem esquerda ”, “ preenchimento ' e ' fronteira ” propriedades. Essas propriedades são usadas para estilizar o elemento pai.
• A seguir, selecione a opção “ captionTopAlign ” e forneça o valor de “ principal ” para o CSS “ alinhamento vertical ' propriedade. Isso faz com que o elemento HTML se alinhe à posição superior.

Após a execução das linhas de código acima, a página da Web aparece assim:

O instantâneo acima mostra que o elemento HTML selecionado agora está alinhado no topo. Da mesma forma, o elemento pode ser alinhado nas direções central, inferior, etc.

Conclusão

Para alinhamento horizontal e vertical, o “ alinhamento de texto ' e ' alinhamento vertical ” Propriedades CSS são utilizadas, respectivamente. A propriedade “text-align” permite o valor de “ esquerda ”, “ certo ”, “ Centro ' e ' justificar ”. Por outro lado, os valores possíveis para a propriedade “vertical-align” são “ linha de base ”, “ sub ”, “ super ”, “ principal ”, “ topo de texto ”, “ meio ”, “ fundo ', e ' texto inferior ”. O alinhamento horizontal e vertical ajuda a criar designs web limpos e profissionais.