csapidus csapidus -3 years ago 160
CSS Question

Aligning multiple inline image blocks to the left and right

I am trying to align multiple inline images, five to the left, and one to the right (the signature), preferably without the use of floats. All images should be vertically aligned (from the top). I hear flex-box is an option, but am having difficulty implementing it correctly.

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>

Answer Source

So here's a solution using flexbox:

  1. Add display: flex to the social_media_logos and give it align-items: center for vertical alignment.

  2. Add margin-left: auto to push the signature to the right and the other icons to the left.

See demo below:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download