Desvendando o Desafio dos Iniciantes: Como Centralizar Elementos com CSS
Introdução:
Olá pessoal👋! Hoje irei mostrar algumas maneiras de como centralizar elementos usando o CSS. Venho notando muitos iniciantes com dificuldades nesse quesito, então vamos começar:
Alinhamento Inline Horizontal: Para centralizar elementos inline, como textos e imagens, podemos usar a propriedade text-align. Essa propriedade é aplicada ao contêiner do elemento inline e alinha os elementos horizontalmente.
Exemplo:
HTML:
<div>
teste
</div>
CSS:
div {
background: pink;
height: 200px;
text-align: center;
width: 200px;
}
OBS: Nessa imagem, observe o texto alinhado ao centro. Esse é o efeito da propriedade text-align.
Centralizando Elementos de Bloco:
Para centralizar elementos de bloco, podemos utilizar as seguintes propriedades:
Utilizando o Display Flex: Usar ‘display: flex;’ facilita e simplifica a centralização de elementos. Para isso, adicionamos a propriedade ’display: flex;’ ao elemento pai e utilizamos propriedades específicas do Flexbox para alinhar os elementos filhos.
OBS: Tenha em mente que, para alinhar em qualquer direção com Flexbox, precisamos levar em conta a propriedade flex-direction, que indica se os itens serão dispostos em linha ou coluna.
As propriedades utilizadas são:
- justify-content: A propriedade justify-content é usada para alinhar os itens no eixo horizontal.
- align-items: A propriedade align-items é usada para alinhar os itens no eixo vertical.
Exemplo apenas com o justify-content:
HTML:
<div>
<span>teste 1</span>
<span>teste 2</span>
</div>
CSS:
div{
background: pink;
height: 200px;
width: 200px;
/* Preste atenção aqui*/
display: flex;
flex-direction: row;
justify-content: center;
}
span{
background: green;
height: 30px;
margin-left: 2px;
width: 70px;
}
OBS: Como estamos com o flex-direction: row;, nossa direção de alinhamento vai ser nessa direção➡️.
Exemplo com o align-items:
div{
background: pink;
height: 200px;
width: 200px;
/* Preste atenção aqui */
display: flex;
align-items:center;
flex-direction: row;
justify-content: center;
}
Centralizando com margen: As margens também podem ser usadas para alinhar elementos horizontalmente. Para centralizar um elemento em bloco, usamos margens automáticas.
EXEMPLO:
HTML:
<div></div>
CSS:
div{
margin: 0 auto;
background: pink;
height: 200px;
width: 200px;
}
Conclusão:
Existem diversas formas de centralizar elementos com CSS. Desde o uso de text-align e vertical-align para elementos inline, até o uso de Flexbox para alinhamentos mais complexos, e margens automáticas para elementos em bloco. Pratique essas técnicas para dominar a centralização de elementos em seus projetos web.
#Estilizacao #CSS #centralizacao
Imagem gerada por IA
