Como alinhar à direita no CSS?

Perguntado por: iaparicio . Última atualização: 17 de julho de 2023
4.8 / 5 2 votos

Já para alinhar um texto pela direita, devemos usar o atributo text-align com o valor right, que significa direita, em inglês.

Experimente criar também uma div à direita, utilizando float:right e posicionando-a DEPOIS da div principal. É importante lembrar que, caso o tamanho somado de suas divs for superior ao tamanho de sua tela, os elementos com float irão “pular para a linha de baixo”, sendo alinhados conforme foi definido.

Isso pode ser feito facilmente utilizando a propriedade flexbox do CSS. E é no CSS que a mágica acontece! Eu vou selecionar a barra de navegação e atribuir a propriedade display: flex para que os elementos fiquem alinhados lado a lado.

Centralizar em CSS: elementos de texto
Esse é o caso mais simples, basta você usar a propriedade text-align: center . Apesar da propriedade começar com a palavra text, os elementos inline, como span ou strong , não sofrem nenhuma alteração.

Caso queira que a imagem se alinhe na direita, use right. Para alinhar no meio, o local é middle. Já para alinhar em cima, no topo, utilize a palavra top.

CSS margin
Através de uma margem, é possível manipular a posição de um elemento HTML. Com isso podemos posicionar um elemento HTML Div através da margin. Existem quatro tipos de margin: margin-top, margin-right, margin-bottom, margin-left. Ou seja, margem superior, margem à direita, margem inferior e margem à esquerda.

Como fazer o posicionamento do elemento <div>: CSS position. Por padrão, o elemento <div> tem a largura da página. Entretanto, podemos aplicar qualquer tamanho a ele e, dessa forma, posicioná-lo de diferentes maneiras na página, como fixá-lo no topo, posicionar as divs uma ao lado da outra e muito mais.

Uma forma de conseguir colocar as divs lado a lado é fazer a última flutuar a direita também, você pode usar float: right; na de baixo.

Align="right" – Alinhamento à direita. Align="justify" – Alinhamento justificado.

3 maneiras de centralizar uma DIV

  1. Primeira maneira: .classic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  2. Segunda maneira: .div-flex { display: flex; align-items: center; justify-content: center; }
  3. Terceira maneira: .div-grid { display: grid; place-items: center; }