html - Aligning multiple inline image blocks to the left and right -
i trying align multiple inline images, 5 left, , 1 right (the signature), preferably without use of floats. images should vertically aligned (from top). hear flex-box option, having difficulty implementing 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>
so here's solution using flexbox:
add
display: flexsocial_media_logos, givealign-items: centervertical alignment.add
margin-left: autopush signature right , other icons 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>
Comments
Post a Comment