左右对齐多个内联图像块答案

【问题标题】：Aligning multiple inline image blocks to the left and right左右对齐多个内联图像块
【发布时间】：2018-01-23 10:57:37
【问题描述】：

我正在尝试对齐多个内联图像，左侧五个，右侧一个（签名），最好不使用浮动。所有图像应垂直对齐（从顶部开始）。我听说 flex-box 是一种选择，但很难正确实施。

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>

【问题讨论】：

标签： html css flexbox alignment

【解决方案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>

【讨论】：

【解决方案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>

我将左侧的所有图标都包裹在一个容器中，并将签名和图标容器推到带有弹性框的主容器的内部。

【讨论】：