Vertikale Ausrichtung von Bildern mit Links in einem div

Question

Ich habe mit diesem einfachen und grundlegenden Problem für den letzten Tag gekämpft und kann nicht scheinen, eine Lösung dafür nirgendwo zu finden.

Ich habe ein Container div auf meiner Website, in dem gibt es vier soziale Netzwerk-Tasten, und was ich versuche zu erreichen, ist sie in der Mitte des Containers ausgerichtet, so dass es gleich viel davon ist Freiraum über und unter ihnen.

Bitte beachten Sie, dass ich normalize.css und reset.css zu meinem HTML Linke habe.

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; 
} 

Jede Hilfe wird sehr geschätzt.

Answer 1

Alles, was Sie hinzufügen müssen, ist 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"> 
 
      <a href="#0"><img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB"></a> 
 
      <a href="#0"><img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW"></a> 
 
      <a href="#0"><img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO"></a> 
 
      <a href="#0"><img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT"></a> 
 
     </div> 
 
    </div>