在網(wǎng)頁設(shè)計中，圖文并茂的布局經(jīng)常被使用。其中一種常見的布局是，將一張圖片放在上面，然后在圖片下方放置一些文字內(nèi)容。CSS可以很方便地實現(xiàn)這種圖文布局。下面我們來看一種簡單的方式：

html {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
.image {
display: block;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.caption {
text-align: center;
margin: 1em 0;
}
.text {
font-size: 1.2em;
line-height: 1.5;
text-align: justify;
}

首先，我們在HTML中放置一個.container元素，它用于包含圖片和文字。這里使用了一個常用的技巧：設(shè)置了寬度為80%并使用margin: 0 auto來讓容器水平居中。

接著，我們定義了一個.image類用于顯示圖片。它使用display: block來讓圖片在垂直方向上占據(jù)整個容器的空間，并設(shè)置了max-width為800像素，可以防止圖片過大而導(dǎo)致容器尺寸太大。最后使用margin: 0 auto來讓圖片水平居中顯示。

緊接著，我們用一個.caption類來放置圖片的說明文字。它使用text-align: center來讓文字水平居中顯示，margin: 1em 0來設(shè)置上下邊距。

最后，我們使用一個.text類來設(shè)置下方文字的樣式。它使用font-size: 1.2em來設(shè)置字體大小，line-height: 1.5來設(shè)置行高，以及text-align: justify來讓文字兩端對齊。

通過這些CSS樣式的設(shè)置，我們能夠?qū)崿F(xiàn)一種簡單的上圖下文布局。當(dāng)然，根據(jù)實際需要，我們也可以根據(jù)需要調(diào)整各種屬性來適應(yīng)不同的設(shè)計。