I have the following structure:
a div with width: 228px and height: 228px .
Class: icons a <a> element with image size (icon).
The problem is that I have some cases that have 3 icons (1 line) and others with more than 3 icons, forming more than one line. That is, my alignment is not exactly in the center when I use more than 3 icons (2 lines).
Link to problem: JSFiddle
Note that the first line of icons is exactly in the center (vertically), but is not taking into account the second line of icons.
Resolved!
I removed the code from the #icon selector:
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
I created a new div called 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;}
Thus making div alinha_icons the size of all the icons and aligned in relation to the size of div .icons.
