html - 容器内的中心图像

Question

在这篇文章中，我想将三张图片放在同一行。第一张图片应该放在左边，第二张应该居中，第三张应该放在右边。

自从在 CSS 中执行 float:left 或 float:right 我解决了第一个和第三个问题，但我无法将第二个图像居中。

<section>
     <article>
         <img class="first" src="img/1.jpg" alt="img"/>
         <img class="second" src="img/2.jpg" alt="img"/>
         <img class="third" src="img/3.jpg" alt="img"/>
     </article>
 </section>

我很感激任何帮助。

Answer 1

article {
  display:flex;
  justify-content:space-between;
}

<section>
     <article>
         <img class="first" src="https://picsum.photos/300/200" alt="img"/>
         <img class="second" src="https://picsum.photos/300/200" alt="img"/>
         <img class="third" src="https://picsum.photos/300/200" alt="img"/>
     </article>
 </section>