Vertical aligning of pictures with links inside a div - html

Question

I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.
I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle
of the container, so there's equal amount of free space on top of them and underneath them.
Please note, that I've linke normalize.css and reset.css to my html.
Muh code:
HTML
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
<a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
CSS
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}
Any help will be much appreciated.

Answer 1

All you need to add is clear
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a {
display: inline-block;
/*vertical-align: middle;*/
height: 100%;
float: right;
clear: both; /* add */
padding: 2px;
margin: 0 3px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0">
<img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0">
<img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0">
<img src="socialicons/google.png" alt="GO"><a/>
<a href="#0">
<img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>

Answer 2

.social-line-container{
border:2px solid black;
}
.social-line-buttons-group{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
height:50px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB">
<img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW">
<img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO">
<img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT">
</div>
</div>