5

Tenho várias div com float: left dentro de uma outra div, que é o container delas, conforme código:

<div id="container">
    <div id="box-1" class="box">1</div>
    <div id="box-2" class="box">2</div>
    <div id="box-3" class="box">3</div>
</div>

Estou tentando alinhá-las horizontalmente dentro do container (conforme figura abaixo), mas não estou conseguindo.

Resultado esperado

Bem, não consigo fazer isso funcionar. Segue meu CSS e em seguida o resultado que estou conseguindo.

#container {
    width: 100%;
    border-color: blue;
    text-align: center;
}

.box {
    float: left;
    width: 100px; height: 200px;
    margin: 10px 20px;
}

#box-1 { background-color: red; }
#box-2 { background-color: green; }
#box-3 { background-color: pink; }

As DIVs ficam alinhadas à esquerda

As DIVs não estão ficando alinhadas como eu supus que aconteceria ao usar text-align: center na container. Como conseguir o resultado esperado?

JSFiddle

1 Resposta 1

4

Para obter o resultado desejado, precisei entender que elementos com float fogem do flow de renderização da página e se tornam elementos independentes (dentro de limitações de position, margin, padding, etc).

Para resolver o problema, foi preciso apenas substituir o atributo float: left por display: inline-block na classe .box:

.box {
    display: inline-block;
    /* o resto permanece igual */
}

Assim, cada uma das DIV se torna um elemento no fluxo de texto da página (enquanto mantém seu comportamento de bloco, que permite a definição de largura e altura, por exemplo). Obtemos assim o resultado almejado e nossas DIVs estão alinhadas de forma centralizada em relação ao container:

inserir a descrição da imagem aqui

JSFiddle


O insight dessa pergunta surgiu a partir de um problema enfrentado em um site que estou criando para um cliente. Como sempre, estou compartilhando meu conhecimento (depois de verificar se tal pergunta já não existia) de forma a auxiliar a meus caros parceiros usuários do SOPT.

3
  • 2
    Dica: Para adicionar suporte ao IE que não interpreta display: inline-block -> Adicione também *display: inline; *zoom: 1; 26/05/2014 às 13:57
  • Estou desconsiderando totalmente o IE :-) 26/05/2014 às 14:19
  • 1
    Obrigado Tiago, você me ajudou a resolver um problema que tava me dando nos nervos, Valeu..........
    – user30017
    12/08/2015 às 4:27

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 .