center image inside a container - html

Question

In this article I have three images that I want to be placed in the same line. The first image should go to the left, the second should be centered and the third will be placed to the right.
I have no problems with the first one and with the third one since doing a float:left or float:right in CSS I solve it but I can not get the second image to center.
<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>
I appreciate any help.

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>

Answer 2

You can used flexbox.
article {
display:flex;
justify-content: space-between;
}
<section>
<article>
<img class="first" src="https://via.placeholder.com/150" alt="img"/>
<img class="second" src="https://via.placeholder.com/150" alt="img"/>
<img class="third" src="https://via.placeholder.com/150" alt="img"/>
</article>
</section>

Answer 3

I recommend you to use Flexbox.
<div class='flexWrapper'>
<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"/>
</div>
.flexWrapper {
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center; /* to align them vertically */
}

Answer 4

hello there!
<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>
use this css class
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
now try to execute it.

Answer 5

finally I solved it by indicating text-align: center in css of the article. It works because the images, like the text, are line elements.
Thank you