CSS - alinhamento de texto

Descrição

A propriedade text-align determina a maneira como as caixas de linha são alinhadas em um elemento de nível de bloco.

Valores possíveis

  • left - A borda esquerda de cada caixa de linha é alinhada com a borda esquerda da área de conteúdo do elemento de nível de bloco.

  • right - A borda direita de cada caixa de linha é alinhada com a borda direita da área de conteúdo do elemento de nível de bloco.

  • center - O centro de cada caixa de linha é alinhado com o centro da área de conteúdo do elemento de nível de bloco.

  • justify - As bordas de cada caixa de linha devem estar alinhadas com as bordas da área de conteúdo do elemento de nível de bloco.

  • string - O conteúdo das células em uma coluna será alinhado na string fornecida.

Aplica-se a

Todos os elementos de nível de bloco (exceto o valor <string>, que se aplica apenas às células da tabela).

Sintaxe DOM

object.style.textAlign = "justify";

Exemplo

A seguir está o exemplo que demonstra como alinhar um texto -

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

Isso produzirá o seguinte resultado -