external css (как выровнять изображения по горизонтали со статьями)

Question

Мне нужно выровнять все эти изображения в элементе article, и я не могу понять, что это правильно

<section>
<div id="imagesMain">
	<article id="art1">
		<img src="C:\Users\edwards\Dropbox\Fay-yaadh Edwards-52036\Web Development Essentials\Task 5\images/ITPic.jpg" class="articlePics" alt="InformationTechnology" />
		<h2 class="articleHeadings">Information Technology</h2>
		<p>simple computer stuff</p>
		<a href="" class="moreButton">More</a>
	</article>
	<article id="art2">
		<img src="C:\Users\edwards\Dropbox\Fay-yaadh Edwards-52036\Web Development Essentials\Task 5\images/Biology.jpg" class="articlePics" alt="biology" />
		<h2 class="articleHeadings">Biology</h2>
		<p>My overview</p>
		<a href="" class="moreButton">More</a>
	</article>
	<article id="art3">
		<img src="C:\Users\edwards\Dropbox\Fay-yaadh Edwards-52036\Web Development Essentials\Task 5\images/history.jpg" class="articlePics" alt="History" />
		<h2 class="articleHeadings">History</h2>
		<p>My overview</p>
		<a href="" class="moreButton">More</a>
	</article>
</div>
</section>

Answer 1

это должно помочь вам начать. Используйте flexbox для этого типа вещей.

<section>
        <div id="imagesMain">
            <article id="art1" style="display:flex;justify-content:space-evenly;align-items:center;width:100%">
                <img   src="C:\Users\edwards\Dropbox\Fay-yaadh Edwards-52036\Web Development Essentials\Task 5\images/ITPic.jpg" class="articlePics" alt="InfoTech" />
                <h2   class="articleHeadings">Information Technology</h2>
             </article>   
                <p>simple computer stuff</p>
                <a href="" class="moreButton">More</a>
            
            <article style="display:flex;justify-content:space-evenly;align-items:center;width:100%" id="art2">
                <img src="C:\Users\edwards\Dropbox\Fay-yaadh Edwards-52036\Web Development Essentials\Task 5\images/Biology.jpg" class="articlePics" alt="biology" />
                <h2 class="articleHeadings">Biology</h2>
                </article>
                <p>My overview</p>
                <a href="" class="moreButton">More</a>
            
            <article style="display:flex;justify-content:space-evenly;align-items:center;width:100%"  id="art3">
                <img src="C:\Users\edwards\Dropbox\Fay-yaadh Edwards-52036\Web Development Essentials\Task 5\images/history.jpg" class="articlePics" alt="History" />
                <h2 class="articleHeadings">History</h2>
                </article>
                <p>My overview</p>
                <a href="" class="moreButton">More</a>
            
        </div>
    </section>