7

Eu tenho várias div's com o seguinte css:

float:left;
width: 25%;
min-width: 300px;
max-width: 400px;

Ou seja, a medida que vou inserindo uma div, ela preenche o espaço disponível a partir do lado esquerdo da div pai e quando não há espaço quebra para baixo.

Acontece que quando quebra para baixo, sobra espaço no lado direito, então queria centrar todas as div's de modo que o espaço no lado esquerdo fique igual ao lado direito.

Eu sei como centrar uma div, não é o caso, porque as divs possuem um width dinâmico.
Tentei fazer um text-align center na div pai e nos filhos um diplay inline-block, porém as últimas divs ficavam ao centro da div pai e eu quero que fiquem no lado esquerdo da div pai que está centrada.

Resumindo é centrar uma div pai quando o conteúdo dessa div são outras divs com width dinâmico, sendo que dentro da div pai não pode sobrar espaços nas laterais.

8
  • 1
    Se não precisar que seja compatível com browsers antigos, flexbox pode resolver.
    – bfavaretto
    Commented 21/05/2014 às 18:40
  • Você poderia fazer seu exemplo aqui Commented 23/05/2014 às 20:00
  • Pode ter javascript ou só pode com CSS? Commented 23/05/2014 às 20:04
  • faz um exemplo no fiddler do seu problema
    – Dorath
    Commented 23/05/2014 às 20:22
  • Oi @Filipe! Isso aqui está muito longe do que quer? i.sstatic.net/DQ6v8.png Commented 26/05/2014 às 15:37

1 Resposta 1

8
+100

Usando flexbox:

HTML:

<div class = "container">
    <div class = "box a">1</div>
    <div class = "box b">2</div>
    <div class = "box c">3</div>
    <div class = "box a">4</div>
    <div class = "box b">5</div>
    <div class = "box c">6</div>
    <div class = "box a">7</div>
    <div class = "box b">8</div>
    <div class = "box c">9</div>
</div>

CSS:

.container {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        width:80%;
        background-color: #ccc;
        margin: 0 auto;
    }

.box {
        min-width:100px;
        max-width:150px;
        min-height:30px;
        flex-grow: 1;
    }

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

O tamanho dos boxes pode ser alterado usando o min-width e o max-width. Somente em casos extremos, apareceria a margem direita, mas isso um @media resolveria (para eliminar o max-width de telas muito estreitas).

Demo: http://jsfiddle.net/Bacco/FGYrH/


Usando JavaScript:

Esta solução foi simplificada para um DIV de largura fixa nos boxes, mas com alguns ajustes (e mais um pouco de matemática :P ) pode ser adaptada para largura flexível:

Acrescentamos um div externo de referência, e um span para não permitir que os floats fiquem escapando do container:

HTML:

<div id="reference">
   <div id="container">
      <div class="box a">1</div>
      <div class="box b">2</div>
      <div class="box c">3</div>
      <div class="box a">4</div>
      <div class="box b">5</div>
      <div class="box c">6</div>
      <div class="box a">7</div>
      <div class="box b">8</div>
      <div class="box c">9</div>
      <span class="clr"></span>
   </div>
</div>

CSS:

#reference, #container, .box {
   padding: 0;
   margin: 0;
}

#reference {
   position:relative;
   background-color: #ffc;
}
#container {
   position: relative;
   background-color: #ccc;
}

.box {
   float: left;
   width:100px;
   min-height:30px;
}

.clr {
   display:block;
   clear:both;
}

.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }

Até aí, fica um layout tradicional, com margem sobrando do lado direito. Perde-se um pouco da estética desejada se por algum motivo a pessoa estiver navegando com JS desabilitado, mas a usabilidade permanece.

Para dar o acabamento final, centralizando o container, resolvemos com uma pequena função JS, que deve ser chamada no onload, no onresize (ou depois de quaisquer alterações de layout feitas com JS ou algum framework):

JS:

window.onresize = function() {
   b2AdjustPadding();
}

function b2AdjustPadding() {
   var boxSize = 100; // Ponha o mesmo width que estiver no CSS
   var reference = document.getElementById('reference');
   var remaining = reference.offsetWidth % boxSize;
   var padLeft = Math.round(  remaining / 2 );
   var padRight = remaining - padLeft;

   reference.style.paddingLeft = padLeft+"px";
   reference.style.paddingRight= padRight+"px";
}

O que fizemos aqui foi basicamente o seguinte: Ao mudar a largura da página, calculamos quanto sobra de margem, usando o módulo ( % ). Depois dividimos isto no meio, arredondando, para adicionar um padding esquerdo no nosso elemento reference. O que sobrar, colocamos no padding direito, pra não sobrar margem de lado nenhum.

Notar que as margens são calculadas separadamente, para problemas de arredondamento não deixarem um pixel sobrando do lado direito, o que aconteceria em certas larguras.

Lembre-se de colocar a mesma largura no CSS e na variável boxSize. Se preferir, pode obter o tamanho dinamicamente, mas acho um tanto de exagero (a não ser que vá fazer uma lib para isso).

Demo: http://jsfiddle.net/Bacco/232Gk/

4
  • É quase isso, apesar de ter um min e um max width e um width com porcentagem, é preciso que os filhos fiquem com o mesmo tamanho quando se esticar/encolhe o browser. Eu reparei que quando esticamos, as divs na linha de baixo não ficam com o mesmo tamanho das divs acima. Commented 26/05/2014 às 9:18
  • @Filipe já adiantando, só com JS então, pois não há um meio de deixar divs independentes com tamanho vinculado via CSS. Vou postar algo nesse sentido.
    – Largato
    Commented 26/05/2014 às 16:26
  • Pois, foi o que pensei, só com JS. Mas a sua ajuda foi excelente, o que você propôs ajudou, apesar da diferença no tamanho das div's, adaptamos o layout para esta solução. Commented 26/05/2014 às 22:39
  • 1
    @Filipe atualizado :)
    – Largato
    Commented 29/05/2014 às 19:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .