Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Frontend SELF PT /Alinhamento de texto

Alinhamento de texto

Frontend SELF PT
Nível 15 , Lição 1
Disponível

6.1 Propriedade text-align

Alinhamento de texto — é praticamente o aspecto mais importante da estilização de páginas da web, que permite controlar como o texto é colocado nos contêineres. CSS fornece duas propriedades principais para o alinhamento de texto: text-align e vertical-align. Essas propriedades permitem gerenciar o alinhamento horizontal e vertical do texto, respectivamente.

A propriedade text-align controla o alinhamento horizontal do texto dentro de um elemento de bloco. Ela define como o texto é alinhado em relação às bordas do elemento.

Valores

  • left: alinha o texto à esquerda (padrão para texto da esquerda para a direita)
  • right: alinha o texto à direita (padrão para texto da direita para a esquerda)
  • center: centraliza o texto
  • justify: alinha o texto à esquerda e à direita, adicionando espaços entre as palavras para distribuir o texto uniformemente por toda a largura do contêiner
  • start: alinha o texto ao início (à esquerda ou à direita dependendo da direção do texto)
  • end: alinha o texto ao final (à direita ou à esquerda dependendo da direção do texto)

Exemplo de uso:

CSS 
    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }
HTML 
    
      <body>
        <p class="left">Este texto está alinhado à esquerda.</p>
        <p class="right">Este texto está alinhado à direita.</p>
        <p class="center">Este texto está centralizado.</p>
        <p class="justify">Este texto está justificado. Ele será esticado para ocupar toda a largura do contêiner.</p>
      </body>

6.2 Propriedade vertical-align

A propriedade vertical-align controla o alinhamento vertical de um elemento em relação à linha de base do seu pai. Ela é frequentemente usada para alinhar elementos inline, como imagens, linhas de texto ou tabelas, verticalmente em uma linha de texto ou em outro contêiner.

Valores:

  • baseline: alinha pela linha de base do pai (valor padrão)
  • sub: alinha como índice subscrito
  • super: alinha como índice sobrescrito
  • text-top: alinha pelo topo da fonte do pai
  • text-bottom: alinha pela parte inferior da fonte do pai
  • middle: alinha pelo meio do pai
  • top: alinha pelo topo do contêiner
  • bottom: alinha pela parte inferior do contêiner
  • Valor percentual: desloca o elemento pelo percentual especificado em relação à altura da linha

Exemplo de uso:

CSS 
    
      .container {
        height: 100px;
        border: 1px solid #000;
      }

      .baseline {
        vertical-align: baseline;
      }

      .sub {
        vertical-align: sub;
      }

      .super {
        vertical-align: super;
      }

      .text-top {
        vertical-align: text-top;
      }

      .text-bottom {
        vertical-align: text-bottom;
      }

      .middle {
        vertical-align: middle;
      }

      .top {
        vertical-align: top;
      }

      .bottom {
        vertical-align: bottom;
      }

      .percent-50 {
        vertical-align: 50%;
      }
HTML 
    
      <body>
        <div class="container">
          <span class="baseline">baseline</span>
          <span class="sub">sub</span>
          <span class="super">super</span>
          <span class="text-top">text-top</span>
          <span class="text-bottom">text-bottom</span>
          <span class="middle">middle</span>
          <span class="top">top</span>
          <span class="bottom">bottom</span>
          <span class="percent-50">50%</span>
        </div>
      </body>
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION