左右对齐多个内联图像块
Posted
技术标签:
【中文标题】左右对齐多个内联图像块【英文标题】：Aligning multiple inline image blocks to the left and right 【发布时间】：2018-01-23 10:57:37 【问题描述】：我正在尝试对齐多个内联图像，左侧五个，右侧一个（签名），最好不使用浮动。所有图像应垂直对齐（从顶部开始）。我听说 flex-box 是一种选择，但很难正确实施。
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" 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" /></a>
<!-- GitHub -->
<a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" /></a>
<!-- News Columns -->
<a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" /></a>
<!-- Resume -->
<img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" />
<!-- Signature -->
<img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" />
</div>
</html>
【问题讨论】：
【参考方案1】：所以这里有一个使用flexbox的解决方案：
将display: flex 添加到social_media_logos 并给它align-items: center 用于垂直对齐。
添加margin-left: auto，将签名推到右侧，将其他图标推到左侧。
请看下面的演示：
/* 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" 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" /></a>
<!-- GitHub -->
<a href="https://github.com/csapidus"><img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" /></a>
<!-- News Columns -->
<a href="columns.html"><img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" /></a>
<!-- Resume -->
<img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" />
<!-- Signature -->
<img id = "signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" />
</div>【讨论】：
【参考方案2】：这是你的意思吗？
<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" />
</a>
<!-- Instagram -->
<a href="https://www.instagram.com/alhusseinimahdi/">
<img src="https://c1.staticflickr.com/5/4296/36011295361_36583c28fb_o.png" />
</a>
<!-- GitHub -->
<a href="https://github.com/csapidus">
<img src="https://c1.staticflickr.com/5/4425/36376344962_247a7a8266_o.png" />
</a>
<!-- News Columns -->
<a href="columns.html">
<img src="https://c1.staticflickr.com/5/4335/36124335440_ba8c32d082_o.png" />
</a>
<!-- Resume -->
<img id="Img1" src="https://c1.staticflickr.com/5/4299/36105742616_d3fe406198_o.png" />
</div>
<!-- Signature -->
<img id="signature" src="https://c1.staticflickr.com/5/4350/36527270485_2b7a1d8506_o.png" />
</div>
</body>
</html>
我将左侧的所有图标都包裹在一个容器中，并将签名和图标容器推到带有弹性框的主容器的内部。
【讨论】：
以上是关于左右对齐多个内联图像块的主要内容，如果未能解决你的问题，请参考以下文章