将多个嵌入式图像块左右对齐 [英] Aligning multiple inline image blocks to the left and right
本文介绍了将多个嵌入式图像块左右对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图对齐多个内嵌图像，左边五个，右边一个（签名），最好不使用浮动。所有的图像应该垂直对齐（从顶部）。我听到弹性盒是一个选项，但是难以正确实施。
https://jsfiddle.net/z5h1tfnt/ 5 /
< html>
< style>
/ *社交媒体按钮* /
.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.pngalt =width =50height =50/>< / a>
<！ - Instagram - >
< a href =https://www.instagram.com/alhusseinimahdi/>< img src =https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.pngalt =width =50height =50/>< / a>
<！ - GitHub - >
< a href =https://github.com/csapidus>< img src =https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.pngalt = width =50height =50/>< / a>
<！ - 新闻专栏 - >
< a href =columns.html>< img src =https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.pngalt =width =50height =50/>< / a>
<！ - 简历 - >
< img id =Img1src =https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.pngalt =width =50height =50/>
<！ - Signature - >
< img id =signaturesrc =https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.pngalt =width =150height =150/>
< / div>
< / html>
解决方案
flexbox ：
-
添加
display：flex到social_media_logos，并为垂直对齐赋予align-items：center / p> -
添加
margin-left：auto将签名和其他图标。
请参阅下面的演示：
/ *社交媒体按钮* /。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 .pngalt =width =50height =50/>< / a> <！ - Instagram - > < a href =https://www.instagram.com/alhusseinimahdi/>< img src =https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.pngalt =width =50height =50/>< / a> <！ - GitHub - > < a href =https://github.com/csapidus>< img src =https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.pngalt =width =50 height =50/>< / a> <！ - 新闻专栏 - > < a href =columns.html>< img src =https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.pngalt =width =50height =50 />< / A> <！ - 简历 - > < img id =Img1src =https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.pngalt =width =50height =50/> <！ - 签名 - > < img id =signaturesrc =https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.pngalt =width =150height =150/> < / div>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>解决方案So here's a solution using
flexbox:Add
display: flexto thesocial_media_logosand give italign-items: centerfor vertical alignment.Add
margin-left: autoto 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>这篇关于将多个嵌入式图像块左右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
