1
I have the following structure:
one div with width: 228px and height: 228px.
Class: icons an element <a> 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 using more than 3 icons(2 lines).
Link to the problem: Jsfiddle
Note that the first row of icons is exactly in the center(vertically), but this does not take into account the second row of icons.
Solved!
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 align_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 causing the div align_icons to the size of all icons and aligned to the size of the div .icons.
Note: this was a provisional code because I did not want to change my code, but it can be solved in other ways, if someone has other solutions I ask you to post.
Hi Gabriel. Please post your solution as an answer in the area below, and mark it as the accepted answer. So it is more organized. I recommend a look at our [tour], here it works different from the traditional forums. Thank you!
– bfavaretto