在網頁設計中，文字與圖片的搭配是非常常見的一種布局方式。而將文字居中放置在圖片上方或下方，則更是一種常見的設計要求。在HTML5中，我們可以通過CSS代碼來實現這樣的效果。

CSS代碼：
.img-with-text {
position: relative;
display: inline-block;
}
.img-with-text img {
display: block;
max-width: 100%;
}
.img-with-text p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
}

通過以上CSS代碼，我們首先將包含圖片和文字的容器塊設為相對定位，并將其顯示設為內聯塊級顯示（display: inline-block）。同時，我們將圖片設為塊級元素，并將其最大寬度設為100%以防止圖片溢出容器。

接下來，我們將文字的定位設為絕對定位，并設定其距離容器頂部和左側的距離。通過CSS3中的translate屬性，我們將文字塊偏移至正中央，從而實現居中效果。

最后，我們可以根據具體需求對文字樣式進行調整，如文字顏色、字號、粗細等。

使用以上CSS代碼，我們可以輕松地實現文字在圖片中間的設計效果，從而讓頁面的文字與圖片更緊密地結合在一起，提升網頁的整體設計感和美觀度。