O arranjo do conteúdo que aparece em um site é altamente significativo quando se trata de tornar seu site requintadamente agradável e aprimorando sua experiência de usuário. O conteúdo pode ser um elemento HTML (em linha ou nível de bloco), algum texto, uma imagem, etc. Existem várias abordagens disponíveis no CSS para alinhar esses tipos de conteúdo em sua página da web. Neste post, vamos discutir algumas dessas abordagens para deixar claro o conceito de alinhamento de conteúdo.

Vamos começar

Alinhe os elementos no nível do bloco

Há uma quantidade enorme de elementos que se enquadram na categoria de elementos no nível do bloco, como

,

para

, , etc. Você pode alinhar esses elementos de maneiras diferentes. Discutimos alguns aqui para você.

Como centralizar o texto alinhado no CSS

Você pode alinhar o texto usando o CSS alinhamento de texto propriedade. Esta propriedade renderiza valores diferentes, como esquerda, direita, centro e justificar.

Exemplo

Suponha que você queira alinhar algum texto presente dentro de um recipiente de div à direita. Siga o código abaixo.

Html

Este texto está certo alinhado.

Colocamos um

elemento dentro de um elemento e atribuiu uma classe "Right" ao elemento.

CSS

.certo
Alinhamento de texto: à direita;
borda: 3px roxo sólido;

Usando a propriedade de alinhamento de texto, estamos alinhando o texto ao lado direito do contêiner Div.

Saída

O texto foi alinhado à direita usando a propriedade de text-align.

Alinhar elementos embutidos

Chega o momento em que precisamos alinhar elementos embutidos, como imagens. Você pode alinhar esses tipos de elementos alterando seu tipo de elemento para bloquear o nível usando a propriedade Display de CSS e depois alinhá -lo várias propriedades CSS de acordo com a necessidade.

Alinhe uma imagem

Usando várias propriedades CSS, como mostrar, margem-esquerda, ou Margem-direita, você pode alinhar uma imagem em qualquer estilo que você gostar.

Exemplo

Suponha que você queira centrar -se alinhando uma imagem horizontalmente além de estar em um contêiner ou não.

Html

Aqui inserimos uma imagem usando a tag.

CSS

img
exibição: bloco;
margem-esquerda: automático;
Margem-direita: Auto;
largura: 50%;

Para centrar -se alinhando uma imagem horizontalmente, defina sua tela para bloquear e ambas as margens (esquerda e direita) para automaticamente. Além disso, você pode fornecer alguma largura ou altura de sua escolha.

Saída

A imagem foi alinhada com o centro com sucesso.

Alinhamento horizontal

Vamos explorar diferentes abordagens que podem ser usadas para alinhar elementos no nível do bloco horizontalmente.

Como centralizar alinhado um elemento

Suponhamos que você tenha um e deseja que ele ocupe apenas uma quantidade especificada de espaço em vez de ocupar todo o espaço horizontal e alinhá -lo no centro da página. Aqui está como você faz isso.

Html

Alinhando o conteúdo em CSS

Aqui, criamos um elemento e aninhamos um

elemento nele.

CSS

.Centro
preenchimento: 5px;
margem: automático;
largura: 70%;
borda: 3px roxo sólido;

Agora, para o elemento div para ocupar o espaço especificado apenas para que não se estenda aos cantos de seu contêiner, dê alguma largura. Para centralizar alinhá -lo horizontalmente, defina a margem para automaticamente.

Saída

A div foi alinhada com o centro com sucesso.

Como alinhar elementos usando a propriedade de posição

Neste exemplo, alinharemos um contêiner Div à direita usando o valor absoluto da propriedade de posição.

Html

Alinhando elementos usando a propriedade de posição CSS

Esta div está alinhada à direita usando o valor aboslute da propriedade de posição CSS.

Aqui criamos dois contêineres da div para entender o funcionamento do valor absoluto da propriedade de posição. A classe “div” é atribuída à primeira tag div e a classe “verde” é atribuída à segunda tag div.

CSS

.div
preenchimento: 15px;
borda: 3px preto sólido;

.verde
Posição: Absoluto;
Direita: 1%;
TOP: 15%;
Largura: 300px;
borda: 3px verde sólido;
preenchimento: 10px;

Ambos os contêineres da DIV receberam algum estilo, no entanto, a propriedade de posição da segunda div foi definida como absoluta. Agora o Segunda div estará alinhado com relação à posição do primeiro div.

Saída

A div "verde" foi absolutamente posicionada em relação ao primeiro div usando a propriedade CSS Position.

Como alinhar elementos usando a propriedade Float.

Suponha que você queira flutuar um recipiente de div para o lado direito da página.

Html

Olá Mundo!

No código acima, criamos um contêiner div e aninhados

elemento nele.

CSS

.certo
Float: Certo;
Largura: 300px;
borda: 3px roxo sólido;
preenchimento: 5px;

Usando a propriedade Float, estamos flutuando toda a div e o conteúdo dentro dela para a direita.

Saída

O contêiner div foi flutuado para a direita com sucesso.

Alinhamento vertical

Aqui explicamos algumas maneiras que você pode usar para alinhar elementos verticalmente.

Como alinhar elementos verticalmente usando preenchimento

Suponha que você queira centralizar verticalmente algum texto presente dentro de um contêiner div.

Html

Este parágrafo está centrado verticalmente.

Aqui criamos um elemento div e aninhados um

elemento dentro dele.

CSS

.Centro
preenchimento: 80px 0;
borda: 3px roxo sólido;

No código CSS acima, estamos dando o preenchimento de 80px da parte superior e inferior e 0px da esquerda e direita 0px para o

tag para centralizar alinhá -lo dentro da div.

Saída

O texto foi alinhado com o centro com sucesso.

Como alinhar elementos usando altura de linha

Usando o mesmo exemplo acima, podemos centrar o texto alinhado usando a propriedade CSS Line Hight também.

CSS

.Centro
altura de linha: 200px;
borda: 3px roxo sólido;
Alinhamento de texto: centro;

.Centro P
altura da linha: 1.5;
Exibição: bloco embutido;

Basta definir a altura da linha do contêiner Div como 200px e depois definir a altura da linha de

elemento para 1.5.

Saída

Os elementos HTML foram alinhados verticalmente e horizontalmente usando altura de linha.

Como alinhar elementos verticalmente usando o Flexbox

Novamente, estamos considerando o mesmo exemplo e usando o Flexbox desta vez para alinhar elementos vertical e horizontalmente.

CSS

.Centro
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
Altura: 200px;
borda: 3px verde sólido;

Aqui, estamos definindo a exibição do contêiner DIV como Flex e Center alinhando o conteúdo e os itens presentes dentro do contêiner Div usando o conteúdo justificado e as propriedades de itens alinhados fornecidos pelo Flex-Box CSS. Além disso, também estamos fornecendo alguma altura e fronteira com ele também.

Saída

O texto é alinhado com sucesso (vertical e horizontalmente) usando o FlexBox.

Conclusão

Existem várias abordagens disponíveis no CSS para alinhar os elementos HTML, como você pode alinhá-los na vertical e horizontalmente à direita, à esquerda ou no centro usando propriedades de posição, propriedades flutuantes, preenchimento, altura de linha ou flexbox, etc. Além disso, você pode usar essas propriedades para alinhar texto e imagens que aparecem em seu site. Discutimos em detalhes algumas abordagens diferentes ao longo de exemplos adequados, que são úteis ao lidar com o alinhamento do conteúdo em suas páginas da web.