Oi!

Centralizar mais de um elemento ao centro de uma div sem flexbox

Centralizar mais de um elemento ao centro de uma div sem flexbox

<p style=”text-align: center;”>Normalmente quando queremos centralizar um elemento dentro de outro, usamos a propriedade “margin: 0px auto”, como demonstrado no exemplo abaixo.</p>

<div class="caixa-azul">
  <div class="caixa-vermelha"></div>
</div>
.caixa-azul{
  width:400px;
  height:100px; 
  padding:20px;
  background-color:blue;
}

.caixa-vermelha{
  width:100px;
  height:100px;
  margin:0px auto;
  background-color:red;
}

<p style=”text-align: center;”>Porém quando adicionamos mais uma caixa vermelha, ao invés de ficarem as duas alinhadas ao centro, cada uma fica em uma linha.</p>

<p style=”text-align: center;”>Para alinharmos as duas caixas vermelhas lado a lado no centro da caixa azul, precisamos primeiro adicionar a propriedade “text-align:center”, na div container, no exemplo, a div caixa-azul.</p>

.caixa-azul{
  text-align:center;
  width:400px;
  height:100px;
  padding:20px;
  background-color:blue;
}

<p style=”text-align: center;”>Em seguida adicionamos a propriedade “display:inline-block” nas divs que queremos centralizar, retire a propriedade “margin:0px auto”, pois ela não vai fazer nada, certifique-se que não tenha a propriedade “float” nos elementos que você quer centralizar.</p>

.caixa-vermelha{
  display:inline-block;
  width:100px;
  height:100px;
  background-color:red;
}

<p style=”text-align: center;”>Veja o resultado:</p>

<p style=”text-align: center;”>Agora com 3 caixas:</p>

<p style=”text-align: center;”>4…</p>

<p style=”text-align: center;”>Mas Wilkier, se a div caixa-azul tem 400px, e a div caixa-vermelha tem 100px, por que não ficam alinhadas 4 divs na mesma linha?</p>

<p style=”text-align: center;”>Então meu caro padawan, isso acontece porque a propriedade “display:inline-block” faz com que a div se comporte como uma palavra em um campo de texto, como ela é agora uma palavra, aqueles benditos espaços e quebras de linha são interpretados, gerando um vão entre as divs, então isso:</p>

<div class="caixa-azul">
  <div class="caixa-vermelha"></div>
  <div class="caixa-vermelha"></div>
  <div class="caixa-vermelha"></div>
  <div class="caixa-vermelha"></div>
</div>

<p style=”text-align: center;”>Na verdade é isso aos olhos do “display:inline-block”:</p>

<div class="caixa-azul">
(oi, eu sou um epaço)<div class="caixa-vermelha"></div>(oi, eu sou uma quebra de linha)
(oi, eu sou um epaço)<div class="caixa-vermelha"></div>(oi, eu sou uma quebra de linha)
(oi, eu sou um epaço)<div class="caixa-vermelha"></div>(oi, eu sou uma quebra de linha)
(oi, eu sou um epaço)<div class="caixa-vermelha"></div>(oi, eu sou uma quebra de linha)
</div>

<p style=”text-align: center;”>Para resolver isso, ou nós removemos as quebras de linha e espaços, emaranhando todo o nosso código:</p>

<div class="caixa-azul"><div class="caixa-vermelha"></div><div class="caixa-vermelha"></div><div class="caixa-vermelha"></div><div class="caixa-vermelha"></div></div>

<p style=”text-align: center;”>Ou podemos comentar os espaços, mantendo  indentação:</p>

<div class="caixa-azul"><!--
--><div class="caixa-vermelha"></div><!--
--><div class="caixa-vermelha"></div><!-- comentário
--><div class="caixa-vermelha"></div><!--
--><div class="caixa-vermelha"></div><!--
--></div>

<p style=”text-align: center;”>E então, bingo, <span style=”text-decoration: line-through;”>temos DNA de dinossauro</span>, alinhamos as 4 caixas na mesma linha.</p>

<p style=”text-align: center;”>Bom pessoal, espero que tenham gostado, até a próxima!</p>

Compartilhe ;)

2 thoughts on “Centralizar mais de um elemento ao centro de uma div sem flexbox”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Novidades