在網(wǎng)頁(yè)設(shè)計(jì)中，如何讓文字在圖片的上方呈現(xiàn)？這就涉及到了CSS的知識(shí)。下面我們來介紹一下如何使用CSS來實(shí)現(xiàn)這一效果。

.img-text {
display: flex; /* 使用flex布局 */
flex-direction: column; /* 圖片與文字垂直排列 */
align-items: center; /* 圖片和文字水平居中對(duì)齊 */
text-align: center; /* 文字水平居中對(duì)齊 */
}
.img-text img {
margin-bottom: 10px; /* 圖片下方留出一定的距離 */
}

以上是實(shí)現(xiàn)文字在圖片上方的CSS代碼。我們給外層容器 .img-text 設(shè)置了 flex 布局，并將圖片和文字都垂直排列。若要實(shí)現(xiàn)文字在圖片下方的效果，只需將容器中的 flex-direction 改為 row 即可。

我們?yōu)?.img-text img 元素設(shè)置了一個(gè) margin-bottom 屬性，這樣圖片與文字之間會(huì)有一定距離，使界面更美觀。