如何使文本直接显示在2x2网格中组织的图像下方

Question

我正试图让文本直接出现在2x2网格中组织的每个图像下面。我似乎不明白。我知道在图像下面写p标签并不能转化为它在网页上的位置，所以我认为这与显示或位置有关，但我尝试了很多不同的迭代，但似乎都没有帮助。非常感谢您的帮助！谢谢

``
.main {
font-family: fantasy;
color: white;
}
.main .browse {
background-color: wheat;
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
}
.main img {
display: inline-block;
width: 50%;
float: left;
padding: 20px 20px;
background-color: pink;
}
.row-1 {
color: black;
}

<section class="main">
<h2 class="browse">Browse</h2>
<div class="row-1">
<img src="./images/macaroon.jpg">
<p>Category 1</p>
<img  src="./images/macaroon.jpg">
<p>Category 2</p>
</div>
<div class="row-2">
<img src="./images/macaroon.jpg">
<p>Category 3</p>
<img src="./images/macaroon.jpg">
<p>Category 4</p>
</div>
</section>

Answer 1

在所有p标记上使用width: fit-content;。

``
.main {
font-family: fantasy;
color: white;
}
.main .browse {
background-color: wheat;
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
}
.main img {
display: inline-block;
width: 50%;
float: left;
padding: 20px 20px;
background-color: pink;
}
.main p{
width:fit-content;
}
.row-1 {
color: black;
}

<section class="main">
<h2 class="browse">Browse</h2>
<div class="row-1">
<img src="./images/macaroon.jpg">
<p>Category 1</p>
<img  src="./images/macaroon.jpg">
<p>Category 2</p>
</div>
<div class="row-2">
<img src="./images/macaroon.jpg">
<p>Category 3</p>
<img src="./images/macaroon.jpg">
<p>Category 4</p>
</div>
</section>

Answer 2

这里要使用的正确html元素是figure元素，它有img和figcaption元素(taht可以是图形元素的第一个或最后一个子元素，可以根据需要进行样式设置。

figcaption文本可以设置样式，并在语义上链接到img，这样它就有了更多的意义，同时在样式上也链接到img元素。

.main {
font-family: fantasy;
color: white;
}
.browse {
background-color: wheat;
text-align: center;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
}
.row {
display: flex;
width: 100%;
}
figure {
flex-grow: 1;
padding: 20px 20px;
background-color: pink;
text-align: center
}
figcaption {
margin-top: 10px;
}
.row-1 {
color: black;
}

<section class="main">
<h2 class="browse">Browse</h2>
<div class="row row-1">
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="150">
<figcaption>Category 1</figcaption>
</figure>
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" width="150">
<figcaption>Category 2</figcaption>
</figure>
</div>
<div class="row row-2">
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg"width="150">
<figcaption>Category 3</figcaption>
</figure>
<figure>
<img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg"width="150">
<figcaption>Category 4</figcaption>
</figure>
</div>
</section>