CSS中，我們經(jīng)常需要在列表中的圖片下面添加一段文字來(lái)描述圖片。這種效果可以用以下代碼實(shí)現(xiàn)。

<ul><li><img src="圖片URL" alt="圖片描述">
<p>這里是圖片下的描述文字</p></li></ul><style>li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
li p {
margin-top: 10px;
font-size: 14px;
color: #666;
}
</style>

以上代碼中，我們使用了ul和li構(gòu)建了一個(gè)無(wú)序列表。在列表項(xiàng)中，我們使用了img標(biāo)簽來(lái)添加圖片，并在圖片后添加了一個(gè)p標(biāo)簽來(lái)添加描述文字。我們還在CSS中對(duì)列表項(xiàng)和描述文字進(jìn)行了樣式的設(shè)置。

具體來(lái)說(shuō)，我們將列表項(xiàng)設(shè)置為flex布局，并將主軸方向設(shè)置為column，這樣圖片和文字就能夠在豎直方向上居中對(duì)齊。同時(shí)，我們將文字的上邊距設(shè)置為10px，字體大小設(shè)置為14px，顏色設(shè)置為#666，讓文字與圖片形成更好的視覺效果。

總之，通過(guò)以上代碼，我們成功實(shí)現(xiàn)了在圖片下添加文字的效果。讀者可以自行修改圖片和文字的內(nèi)容，來(lái)達(dá)到自己想要的效果。