Question

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

<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

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 2

你可以通过使用flex实现这一点，它对这样的事情非常有用。输出你可能需要自己调整，但你要求的是那里。

看看这个link to view more on flex。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

中间3个图像中间，左右图像与中间图像对齐

3 个答案: