3 张图像的中间，左右图像与中间图像对齐

Question

是否可以让 3 张图像的中间水平居中，然后将左图像与中间图像的左侧对齐，右图像与中间图像的右侧对齐？

https://jsfiddle.net/0wk84qaf/

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div style="text-align:center;">
<div style="display:inline-block;">
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;" />
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;" />
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;" />
</div>
</div>

你可以看到，目前，整个div都居中，但中间的图像略微偏离中心，而我希望它在中间爆炸......

Answer 1

您可以使用绝对定位。将中间图像居中置于父项的中央，并将其他元素绝对放置在该父项的任一侧。

.images {
display: inline-block;
position: relative;
}
.images img:first-child,
.images img:last-child {
position: absolute;
top: 50%;
}
.images img:first-child {
left: 0;
transform: translate(-100%,-50%);
}
.images img:last-child {
right: 0;
transform: translate(100%,-50%);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div style="text-align:center;">
<div class="images">
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;" />
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;" />
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;" />
</div>
</div>

Answer 2

你可以通过使用flex来实现这一点，它对这样的事情真的很好。输出您可能需要自己调整，但您请求的内容就在那里。

查看此链接以查看有关 flex 的更多信息。

.img-holder {
display: flex;
flex-direction: row;
width: 100%;
}
.img-holder .img {
width: 100%;
justify-content: space-between;
}
.img-holder img {
width: 90%;
height: auto;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="img-holder">
<div class="img">
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;" />
</div>
<div class="img img-smaller">
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;" />
</div>
<div class="img">
<img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;" />
</div>
</div>

Answer 3

只需使您的img标签的宽度为33.3%

<div style="text-align:center;"><div style="display:inline-block;
%"><img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award1-2.jpg" style="vertical-align:middle;width:33.3%" /><img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award3-2.jpg" style="vertical-align:middle;width:33.3%" /><img src="http://rubyandgrace.cdudigital.com/wp-content/uploads/2017/06/award2-2.jpg" style="vertical-align:middle;width:33.3%" /></div></div>