div内のリンクとピクチャの垂直方向の整列

Question

私はこの単純で基本的な問題を最後の日に苦労しており、解決策を見つけることができませんでした。

私は4つのソーシャルネットワークボタンがある私のウェブサイトにコンテナ部門を持っています。私が達成しようとしているのは、コンテナの中央にある に垂直に並べているためですそれらの上および下に自由空間があります。

私はlinke normalize.cssとreset.cssを自分のhtmlに持っています。

MUHコード：

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

すべてのヘルプははるかに高く評価されます。

Answer 1

あなたが追加する必要があるのは、このリンクをチェック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>