在網頁設計中，有時需要將圖片和文字進行上下排列，以便更好地展示相關信息和效果。這種排列的實現需要使用CSS，下面我們來具體講講如何實現。

// 基本結構
<div class="content">
<img src="#" class="img1">
<p class="text1">文本內容</p>
</div>
// CSS代碼
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.img1 {
width: 50%;
}
.text1 {
margin-top: 20px;
text-align: center;
}

在以上代碼中，我們先創建了一個包含圖片和文本的div，并添加了類名為“content”。接著，我們設置該div的CSS樣式，將其布局方向設置為縱向，并且讓其內部元素垂直居中對齊。

接下來，我們需要設置圖片的樣式。在這里，我們將圖片的寬度設置為50%，以便更好地適應不同屏幕大小。并且，我們通過設置段落的margin-top來讓其與圖片保持一定間距，同時將文本居中顯示。

最后，我們只需要根據實際需要更改圖片和文本的類名、屬性和樣式，即可實現自己想要的效果。