Pular para conteúdo

06 posicionamento texto

Posicionamento de Texto#

O posicionamento de texto em uma página HTML é tão importante quanto o posicionamento de elementos, pois pode afetar a legibilidade e o fluxo visual da página. Existem várias maneiras de posicionar o texto em uma página HTML.

Texto Alinhado#

O alinhamento do texto é a maneira mais comum de posicioná-lo em uma página HTML. O texto pode ser alinhado à esquerda, à direita, ao centro ou justificado (onde o espaço entre as palavras é ajustado para que as linhas de texto fiquem alinhadas nas bordas esquerda e direita da página).

  <p style="text-align: left;">Este é um texto alinhado à esquerda.</p>
  <p style="text-align: right;">Este é um texto alinhado à direita.</p>
  <p style="text-align: center;">Este é um texto centralizado.</p>
  <p style="text-align: justify;">Este é um texto justificado.</p>

Texto em Colunas#

O texto em colunas é usado para dividir o conteúdo de um parágrafo ou uma seção em várias colunas. Isso é útil para manter um layout organizado e aumentar a legibilidade.

  <div style="column-count: 2;">
    <p>Este é um texto dividido em duas colunas.</p>
    <p>Isso é útil para manter um layout organizado e aumentar a legibilidade.</p>
  </div>

Texto Flutuante#

O texto flutuante é usado para posicionar o texto ao lado de uma imagem ou outro elemento. O texto flutuante pode ser alinhado à esquerda ou à direita do elemento em que está flutuando.

  <img src="imagem.jpg" style="float: left;">
  <p>Este é um texto flutuante à esquerda de uma imagem.</p>

  <img src="imagem.jpg" style="float: right;">
  <p>Este é um texto flutuante à direita de uma imagem.</p>