Como alinhar texto usando CSS – Aprender CSS

Por | Atualizado em 2015-11-12

Neste artigo iremos aprender como alinhar um elemento na sua página HTML, usando a linguagem de estilo CSS. A linguagem de estilo CSS permite alinhar vários tipos elementos (como texto, imagens, etc.) consoante as suas necessidades.

O que poderá fazer com os alinhamentos CSS?

  • Alinhar texto (à esquerda, direita, centrado ou justificado);
  • Alinhar vários elementos da página (imagens, divs, etc.);
  • Etc.

Alinhar texto em CSS

Alinhar um texto usando a linguagem CSS é bastante simples. Você poderá declarar o alinhamento na secção “style” da sua página, ou declarar localmente (embora deva ser evitado).

alinhamento css


Para declarar o alinhamento na secção “style” da sua página, comece por declarar uma “class” (que inicia com um “ponto”), seguido do nome que pretende atribuir.

Para terminar declare a propriedade “text-align” dentro de chavetas {} definindo o respetivo tipo de alinhamento que deseja. Por exemplo:


<style type="text/css">
.justificado {
text-align: justify;
}
</style>

Após a declaração do alinhamento na secção Style basta “chamar” a “class” no elemento que você pretende aplicar o alinhamento. Por exemplo:

<div class="justificado">Este texto será justificado</div>

Em alternativa, você poderia igualmente declarar localmente o “estilo” do elemento (e respectivo alinhamento) no próprio elemento. Esta técnica não é tão recomendada, pois pode tornar as suas páginas mais “pesadas” através da repetição do código.

Exemplo:

<div style="text-align: justify;">O texto que iria ser justificado</div>
ou
<p style="text-align: justify;">O texto que iria ser justificado</p>

O alinhamento “horizontal” do texto em CSS suporta os seguinte atributos:

  • text-align: left; (esquerda)
  • text-align: right; (direita)
  • text-align: center; (centro)
  • text-align: justify; (justificado)

Alinhamento Vertical

Em CSS você também pode alinhar os elementos verticalmente, através da propriedade “vertical-align”. Na prática, o alinhamento vertical é aplicado da mesma forma.

Por exemplo, para centrar um elemento na vertical, usaríamos o seguinte código:

. elemento {
vertical-align:middle;
}

Quais os valores que posso usar na propriedade vertical align:

middle: alinha o elemento ao meio;
top: posiciona o elemento no topo;
bottom: alinha o elemento na parte inferior;

Ficou com dúvidas? Envie o seu comentário expondo a sua dúvida.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *