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: 05px;
}

#signature{
   margin-left:auto;
}
<divclass="social_media_logos"><!-- LinkedIn --><ahref="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><imgsrc="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png"alt=""width= "50"height= "50" /></a><!-- Instagram --><ahref="https://www.instagram.com/alhusseinimahdi/"><imgsrc="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png"alt=""width="50"height="50" /></a><!-- GitHub --><ahref="https://github.com/csapidus"><imgsrc="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png"alt=""width="50"height="50" /></a><!-- News Columns --><ahref="columns.html"><imgsrc="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png"alt=""width="50"height="50" /></a><!-- Resume --><imgid="Img1"src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png"alt=""width="50"height="50" /><!-- Signature --><imgid = "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: 05px;
        width: 100%;
        align-items: center;
        justify-content: space-between
    }
    </style></head><body><divclass="social_media_logos"><div><!-- LinkedIn --><ahref="https://www.linkedin.com/in/mahdi-al-husseini-0aa98678/"><imgsrc="https://c1.staticflickr.com/5/4292/35304750524_b7a7b46958_o.png"alt=""width="50"height="50" /></a><!-- Instagram --><ahref="https://www.instagram.com/alhusseinimahdi/"><imgsrc="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png"alt=""width="50"height="50" /></a><!-- GitHub --><ahref="https://github.com/csapidus"><imgsrc="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png"alt=""width="50"height="50" /></a><!-- News Columns --><ahref="columns.html"><imgsrc="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png"alt=""width="50"height="50" /></a><!-- Resume --><imgid="Img1"src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png"alt=""width="50"height="50" /></div><!-- Signature --><imgid="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.

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