HTML Center Text – Como CSS Alinhar Verticalmente uma Div

  .right {
        float: right;
      }
     
      .left {
        float: left;
      }
// HTML

    <span class="right">Right</span>
    <span class="left">Left</span>

Para centralizar o texto usando float, podemos usar margin-left ou margin-right e faça isso 50%, como abaixo.

    .center {
    float: left;
    margin-left: 50%;
    }

/* HTML*/
<span class="center">Center</span>

Você pode aprender mais sobre os usos de Float aqui.

Usando o alinhamento de texto

text-align é uma maneira mais conveniente e específica de alinhar o texto. Isso nos permite colocar o texto no center ou para o left ou right lado, como mostra o exemplo a seguir:

.right {
text-align: right;
}

.left {
text-align: left;
}
.center {
text-align: center;
}
/* HTML */

<p class="right">Right</p>
<p class="center">Center</p>
<p class="left">Left</p>

Aprender mais sobre text-align.

Como alinhar um `div`

Bem, existem muitas maneiras de fazer isso.

Da mesma forma que usamos Float para alinhar o texto, podemos usá-lo para alinhar um div elemento também.

Float faz o trabalho, mas o CSS nos oferece opções melhores, mais convenientes e elegantes. Você já ouviu falar de Flexbox? Ou css-grid?

Bem, esses dois métodos fornecem maneiras muito modernas de alinhar e trabalhar com seu layout em CSS. Vejamos o Flexbox com mais detalhes.

Flexbox oferece uma maneira fácil e direta de alinhar um div – e é meu método favorito até agora para lidar com layouts em CSS (eu uso todos os dias).

Vamos ver o que faríamos com Flexbox para ver como funciona, recriando o mesmo exemplo acima.

O exemplo:

O código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Flexbox</title>
    <style>
      .container {
        display: flex;
      }
      .container div {
        width: 33%;
        height: 60px;
      }

      .left {
        background: yellow;
      }
      .right {
        background: red;
      }
      .center {
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">Left div</div>
      <div class="center">centered div</div>
      <div class="right">right div</div>
    </div>
  </body>
</html>

vamos quebrar isso

Sempre definimos um div pai usando display:flex aplicar Flexbox. Então, fazemos todos os filhos do div dentro do pai div capaz de ser tratado usando Flexbox propriedades.
o flex-direction usa o row direção por padrão, o que significa que os elementos serão colocados verticalmente dentro do contêiner.
Com o justify-content propriedade, podemos alinhar um divfilhos de em diferentes direções, como no exemplo a seguir:

.container{
 display: flex:
 justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */

}

justify-content:center coloca os elementos no centro do contêiner.
justify-content:flex-start coloca os elementos no início do contêiner à esquerda.
justify-content:flex-end coloca os elementos no final do contêiner do lado direito.
justify-content:space-around faz com que os elementos caibam no contêiner e coloca uma lacuna igual entre todos os elementos.
justify-content:space-evenly distribui os elementos dentro do contêiner pai igualmente com o mesmo espaço e a mesma largura.

O exemplo acima se aplica a todos os filhos dos elementos como um grupo.

Imagine se quiséssemos alinhar um único div dentro do recipiente. Sempre podemos usar align-self para alinhar um único elemento.

.container div{
 align-self:center /* can have: flex-start, or flex-end*/
}

Podemos aplicar a mesma coisa a um texto com Flexbox como no exemplo a seguir:


<style>
.right{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
  
</style>
<div class="right">
<span>right div</span>
</div>

Este é um ótimo tweet de Julia Evans que ilustra a centralização em CSS em geral:

Embrulhar

Existem várias maneiras de centralizar elementos em CSS. E você sempre aprenderá coisas novas com o tempo, à medida que pratica mais e mais.

Portanto, recomendo que você trabalhe com alguns exemplos do que aprendeu hoje para que permaneça.

Usando o alinhamento de texto

Como alinhar um div

Embrulhar

Como alinhar um `div`