Primeiro vamos aprender como alinhar o texto com CSS.

A seguir, veremos como alinhar um div e quaisquer outros elementos.

E, finalmente, aprenderemos como podemos colocar um texto e um div juntos dentro de um contêiner.

Como centralizar o texto

Existem várias maneiras de centralizar o texto usando CSS.

Usando a propriedade Float

Float é uma maneira fácil de alinhar o texto.

Para colocar o texto no lado direito do layout, podemos simplesmente usar right como um valor para float.

Para colocar o texto no lado esquerdo, usamos left, gostar float:left. Veja o exemplo abaixo:

  .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:

centering css tweet
Tweet original aqui

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.