1

Tenho a seguinte estrutura:

uma div com width: 228px e height: 228px.

Classe: icons um elemento <a> com com tamanho da imagem (ícone).

O problema é que tenho alguns casos que tem 3 ícones(1 linha) e outros com mais de 3 ícones, formando mais do que uma linha. Ou seja, o meu alinhamento não fica exatamente no centro quando utilizo mais de 3 ícones(2 linhas).

Link com o problema: JSFiddle

Observe que o a primeira linha de ícones esta exatamente no centro(verticalmente), mas não esta levando em consideração a segunda linha de ícones.

Resolvido!

Retirei o código do seletor #icon:

top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Criei uma nova div chamada alinha_icons:

<div id="icons">
   <div id="alinha_icons">
       <a class="icon" target="_blank" href="#"><img src="img.png"></a>
       <a class="icon" target="_blank" href="#"><img src="img.png"></a>
       <a class="icon" target="_blank" href="#"><img src="img.png"></a>
       <a class="icon" target="_blank" href="#"><img src="img.png"></a>
    </div>
</div>

#alinha_icons{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
display: block;}

Assim fazendo com que a div alinha_icons ficasse com o tamanho de todos os ícones e alinhado em relação ao tamanho da div .icons.

OBS: este foi um código provisorio pois não queria mudar meu código, mas pode ser resolvido de outras formas, se alguém tiver outras soluções peço para que postem.

1
  • Oi Gabriel. Por favor poste sua solução como resposta na área mais abaixo, e marque ela como a resposta aceita. Assim fica mais organizado. Recomendo uma olhada no nosso tour, aqui funciona diferente dos fóruns tradicionais. Obrigado!
    – bfavaretto
    Commented 24/02/2015 às 16:47

1 Resposta 1

2

Isto é um comportamento normal, a largura ocupada por todos os <a> é maior que a da sua div #icons. Mesmo que você use a propriedade white-space:nowrap (em #icons) o conteúdo interno ultrapassará o limite:

img

Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.

Alternativa

Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade flexbox.


Exemplo:

* {-webkit-box-sizing:border-box;box-sizing: border-box;}

/* Só isso...
   Não precisei definir nada nos elementos filhos */
.documents {
    display: -webkit-flex;
     display: -ms-flexbox;  
        display: -moz-box;
            display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>

<p>Com um único elemento</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais de um...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

<p>Com mais ainda...</p>
<div class='documents'>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
    <span class='fa fa fa-file-word-o'></span>
</div>

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 .