複数のインライン画像ブロックを左右に揃える

複数のインライン画像を、左に5つ、右に1つ（シグネチャ）、好ましくは浮動小数点数を使用せずに整列させようとしています。すべての画像は垂直方向（上から）に配置する必要があります。フレックスボックスはオプションだと聞きましたが、正しく実装するのが難しいです。複数のインライン画像ブロックを左右に揃える

https://jsfiddle.net/z5h1tfnt/5/

<html> 

<style> 
/* Social Media Buttons */ 
.social_media_logos { 
    display: inline-block; 
    margin: 0 5px; 

} 

#signature{ 
    vertical-align: top; 
} 

</style> 

<div class="social_media_logos"> 

    <!-- LinkedIn --> 
    <a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" /></a> 

    <!-- Instagram --> 
    <a href="https://www.instagram.com/alhusseinimahdi/"><img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" /></a> 

    <!-- GitHub --> 
    <a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" /></a> 

    <!-- News Columns --> 
    <a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" /></a> 

    <!-- Resume --> 
    <img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" /> 

    <!-- Signature --> 
    <img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" /> 

</div> 

</html>

出典

2017-08-15 csapidus

だからここflexboxを使用してソリューションです：

はsocial_media_logosにdisplay: flexを追加し、に垂直配向のためにそれをalign-items: centerを与えます。
の署名をの右側に、その他のアイコンを左側に押して、margin-left: autoを追加します。

デモは、以下を参照してください：

/* Social Media Buttons */ 
 
.social_media_logos { 
 
    display:flex; 
 
    align-items: center; 
 
    margin: 0 5px; 
 
} 
 

 
#signature{ 
 
    margin-left:auto; 
 
}

<div class="social_media_logos"> 
 
      
 
    <!-- LinkedIn --> 
 
    <a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width= "50" height= "50" /></a> 
 

 
    <!-- Instagram --> 
 
    <a href="https://www.instagram.com/alhusseinimahdi/"><img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" /></a> 
 

 
    <!-- GitHub --> 
 
    <a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" /></a> 
 

 
    <!-- News Columns --> 
 
    <a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" /></a> 
 

 
    <!-- Resume --> 
 
    <img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" /> 
 

 
    <!-- Signature --> 
 
    <img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" /> 
 

 
</div>

出典

2017-08-15 13:52:55 kukkuz

はあなたが何を意味するか、このですか？

<html> 
<head> 
    <style> 
    .social_media_logos { 
     display: flex; 
     margin: 0 5px; 
     width: 100%; 
     align-items: center; 
     justify-content: space-between 
    } 
    </style> 
</head> 
<body> 
    <div class="social_media_logos"> 
     <div> 
      <!-- LinkedIn --> 
      <a href="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"> 
       <img src="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png" alt="" width="50" height="50" /> 
      </a> 

      <!-- Instagram --> 
      <a href="https://www.instagram.com/alhusseinimahdi/"> 
       <img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" alt="" width="50" height="50" /> 
      </a> 

      <!-- GitHub --> 
      <a href="https://github.com/csapidus"> 
       <img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" alt="" width="50" height="50" /> 
      </a> 

      <!-- News Columns --> 
      <a href="columns.html"> 
       <img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" alt="" width="50" height="50" /> 
      </a> 

      <!-- Resume --> 
      <img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" alt="" width="50" height="50" /> 
     </div> 

     <!-- Signature --> 
     <img id="signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" alt="" width="150" height="150" /> 
    </div> 
</body> 
</html>

Iは、容器内に左のすべてのアイコンを包み、フレックスボックスが主容器の内部外部に署名とアイコン容器を押し込みます。

出典

2017-08-15 13:58:48

複数のインライン画像ブロックを左右に揃える

答えて

関連する問題