在網頁設計中，css是非常重要的一部分，css可以控制html元素的樣式，使其更加美觀，其中有一個常見的需求就是在頁面中同時顯示圖片和文字，并且要求文字在圖片的上方或下方，這就要用到css對圖片和文字布局的控制。

img {
display: block;
margin: 0 auto;
}
.text {
text-align: center;
}

首先，我們需要讓圖片顯示出來。通過設置display屬性為block，使圖片具有塊級元素的特性，即獨占一行。然后，利用margin屬性使圖片水平居中顯示。代碼如下：

img {
display: block;
margin: 0 auto;
}

接下來，我們需要使文字在圖片的上方或下方，并且水平居中顯示。此時可以給文字容器設置text-align為center，并且自行選擇對齊方式。這里以文字在圖片下方為例，將容器放置于圖片下方，并設置容器的寬度。代碼如下：

.text {
text-align: center;
}

給容器一個特定的寬度，可以避免文字的換行現象。如果容器寬度大于圖片寬度，可以在容器的左右兩側留出一定的空白。如果容器寬度小于圖片寬度，則文字會被裁剪。因此，在設計頁面時需要根據實際情況選擇一個合適的寬度。

CSS可以為圖片和文字帶來更好的呈現效果，同時也可以讓我們更靈活地掌控頁面布局。通過對布局樣式的掌握，可以設計出更好的網頁頁面，提高用戶的使用體驗。