將多個嵌入式圖像塊對齊到左側和右側

我試圖對齊多個嵌入式圖像，左側五個，右側一個（簽名），最好不使用浮動。所有圖像應該垂直對齊（從頂部）。我聽說彈性盒是一種選擇，但難以正確實施。將多個嵌入式圖像塊對齊到左側和右側

<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一個解決方案：

添加display: flex到social_media_logos並給它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>

我纏繞在左側的所有圖標在容器中，並用柔性盒推簽名和圖標容器到主容器的內外部。

來源

2017-08-15 13:58:48

將多個嵌入式圖像塊對齊到左側和右側

回答

相關問題