在網(wǎng)頁設(shè)計(jì)中，常常需要制作上圖下文的列表，這種列表既美觀又能起到很好的排版作用。下面將介紹如何使用CSS來實(shí)現(xiàn)這種效果。

.list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 20px;
}
.item img {
width: 200px;
height: 200px;
margin-bottom: 10px;
}

代碼中首先定義了一個(gè)class為list的容器，使用flex布局，并設(shè)置了主軸方向?yàn)榇怪狈较颍╟olumn），以及在主軸和交叉軸上都居中對(duì)齊。這樣可以讓整個(gè)列表居中展示。

接著定義了一個(gè)class為item的子元素，同樣使用flex布局，主軸方向?yàn)榇怪狈较颍╟olumn），在主軸和交叉軸上都居中對(duì)齊，并設(shè)置了20px的底部邊距。這樣可以讓每個(gè)item都垂直居中展示，且能與其他item有一定的間隔。

最后是對(duì)img標(biāo)簽的定義，設(shè)置了圖片的寬度和高度，并加上了10px的底部邊距，讓圖片與下方文字有一定的距離。

通過上述的CSS代碼，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的上圖下文列表。