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.