Html 将图像居中放置在容器内

在本文中，我有三个图像，我想放在同一行。第一个图像应位于左侧，第二个图像应居中，第三个图像应位于右侧

我对第一个和第三个都没有问题，因为在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>

谢谢你的帮助

文章{
显示器：flex；
证明内容：之间的空间；
}

我建议您使用

.flexWrapper{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；/*以垂直对齐项目*/
}

您可以使用flexbox

文章{
显示器：flex；
证明内容：之间的空间；
}

你好

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

---

现在试着执行它。

最后，我在文章的css中指出text align:center解决了这个问题。它之所以有效，是因为图像和文本一样，都是线条元素。 多谢各位

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

    .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
    }