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 (
Solution 1:
So here's a solution using flexbox
:
Add
display: flex
to thesocial_media_logos
and give italign-items: center
for vertical alignment.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"