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

Question

我試圖對齊多個內嵌圖像，左邊五個，右邊一個（簽名），最好不使用浮動。 所有圖像應垂直對齊（從頂部）。 我聽說flex-box是一個選項，但我很難正確實現它。

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

Answer 1

所以這是使用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>

Answer 2

你是這個意思嗎？

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

我將左側的所有圖標包裝在一個容器中，然后使用彈性框將簽名和圖標容器推到主容器的內部外部。

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

問題描述

2 個解決方案

解決方案1
3 已采納 2017-08-15 13:52:55

解決方案2
0 2017-08-15 13:58:48

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

問題描述

2 個解決方案

解決方案1 3 已采納 2017-08-15 13:52:55

解決方案2 0 2017-08-15 13:58:48

解決方案1
3 已采納 2017-08-15 13:52:55

解決方案2
0 2017-08-15 13:58:48