Aula 48 - Alinhamentos de Texto HTML e CSS

Introdução

O alinhamento de textos é uma técnica utilizada para organizar visualmente as informações dentro de uma página Web.

Em HTML5, a estrutura do conteúdo é criada utilizando elementos como parágrafos e títulos. O controle visual do alinhamento é realizado principalmente através do CSS.

📌 O HTML cria a estrutura e o CSS controla a apresentação visual.

Propriedade CSS text-align

A propriedade text-align define como o texto será distribuído horizontalmente dentro de um elemento.



p {

  text-align: center;

}

Tipos de Alinhamento

Valor	Descrição
left	Alinha o texto à esquerda.
center	Centraliza o texto.
right	Alinha o texto à direita.
justify	Distribui o texto deixando as margens alinhadas.

Alinhamento à Esquerda (left)

É o alinhamento padrão utilizado pela maioria dos navegadores.



p {

  text-align: left;

}

Este texto está alinhado à esquerda.

Alinhamento Centralizado (center)

Muito utilizado em títulos, banners e elementos de destaque.



h1 {

  text-align: center;

}

Texto centralizado na página.

Alinhamento à Direita (right)

Usado em situações específicas como datas, valores ou informações posicionadas no lado direito.



p {

  text-align: right;

}

Texto alinhado à direita.

Texto Justificado (justify)

O alinhamento justificado distribui o texto igualmente entre as margens.

É bastante utilizado em artigos, livros digitais e textos longos.



p {

  text-align: justify;

}

O texto justificado cria uma aparência semelhante aos documentos impressos, deixando as laterais alinhadas. É muito utilizado em conteúdos acadêmicos, artigos e materiais de estudo.

Alinhamento de Títulos



h1 {

  text-align:center;

}


h2 {

  text-align:left;

}

Título Centralizado

Subtítulo à Esquerda

Alinhamento Vertical

O alinhamento vertical controla a posição dos elementos no eixo vertical.

É muito utilizado com Flexbox.



.container {

 display:flex;

 align-items:center;

}

Alinhamento utilizando Flexbox

O Flexbox é uma tecnologia CSS moderna para organizar elementos.



.menu {

 display:flex;

 justify-content:center;

 align-items:center;

}

Onde utilizar alinhamentos?

Elemento	Uso comum
Títulos	Centralizado ou esquerda.
Textos longos	Justificado.
Menus	Flexbox.
Botões	Centralizado.

Erros Comuns

Usar vários espaços para alinhar textos.
Utilizar tabelas para criar layout.
Misturar estrutura HTML com estilos.
Não considerar dispositivos móveis.

Boas Práticas

Utilize CSS para controlar alinhamentos.
Mantenha o HTML semântico.
Escolha alinhamentos pensando na leitura.
Teste em diferentes tamanhos de tela.

Resumo da Aula

Propriedade	Função
text-align:left	Esquerda.
text-align:center	Centro.
text-align:right	Direita.
text-align:justify	Justificado.

📐 Alinhamentos de Texto em HTML e CSS