javascript - 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>