Skip to content Skip to sidebar Skip to footer
Home / Alignment / Css / Flexbox / Html

Aligning Multiple Inline Image Blocks To The Left And Right

Post a Comment
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 (

Solution 1:

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>

Solution 2:

Is this what you mean?

<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 wrapped all the icons on the left in a container and pushed the signature and the icon container to the inner outside of the main container with flex box.


You may like these posts

Post a Comment for "Aligning Multiple Inline Image Blocks To The Left And Right"