文章中图像的中心标题

Question

我有四篇文章在网格中布局，我想要实现的是在每篇文章中都有一个图像，然后在下面集中两个标题。

文章和图片按照我想要的布局，h2和h3s位于每篇文章的左侧，而不是居中。

.sportSection {
overflow-x: hidden;
width: 100%;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
article {
width: 25%;
text-align: center;
}
article img {
height: auto;
object-fit: cover;
transition: filter .4s ease-in-out;
filter: grayscale(100%);
}
article img:hover {
transition: filter .4s ease-in-out;
filter: grayscale(0%);
}
.articleHeading {
text-align: center;
}

<section class="sportSection">
<article>
<a href="index.html"><img src="takes/hotTakes/hotTake1/tsTestImage1.jpg"></a>
<element class="articleHeading">
<h2>Back of the net</h2>
<h3>By Test Author</h3>
</element>
</article>
<article>
<a href="index.html"><img src="takes/hotTakes/hotTake2/tsTestImage2.jpg"></a>
<element class="articleHeadings">
<h2>All on the line</h2>
<h3>By Test Author</h3>
</element>
</article>
<article>
<a href="index.html"><img src="takes/hotTakes/hotTake3/tsTestImage3.jpg"></a>
<h2>Pace.Power.Pride</h2>
<h3>By Test Author</h3>
</article>
<article>
<a href="index.html"><img src="takes/hotTakes/hotTake4/tsTestImage4.jpg"></a>
<h2>Podium paradise</h2>
<h3>By Test Author</h3>
</article>
</section>

Answer 1

您拥有的article是width:25%。把它改成100%.
那么你就不需要.articleHeading部分在你的CSS。