Centralizando um elemento com CSS
1 minutos de leitura
Autor(a)
gabriel-ferreira
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
1 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Se você desenvolve pra web é mais do que comum querermos centralizar elementos na tela, certo? Vamos imaginar que temos a seguinte div:
<div class="container">
<p>Aqui temos um texto</p>
<div>
Se você quiser centralizar o texto dentro da div, pode fazer:
.container { text-align: center; }
Você pode ver esse código funcionando aqui aqui.
Esse código funciona para centralizar qualquer elemento que seja inline (você pode ver quais são inline) ou inline-block.
Ah, mas e se eu não quiser centralizar o conteúdo, mas sim a div na tela? Desse jeito que fizemos, não vai funcionar. Nesse caso, temos que fazer basicamente duas coisas:
dar um tamanho para a div e setar as margens esquerda e direita para auto:
.container {
width: 700px;
margin-left: auto;
margin-right: auto;
}
Você pode ver um demo desse código aqui.
Esse código funciona para qualquer elemento block.
E aí, gostou? Quer aprender mais? Dá uma olhada na nossa Formação Front-End!
Avalie este artigo
