在網站設計或開發中，有時候需要將文字放到圖片上，讓頁面更加有趣和生動。但是，如果文字沒有居中對齊，會給用戶帶來不舒適的閱讀體驗。這時，我們可以使用CSS將文字放到圖片上并居中對齊。
首先，我們需要在HTML中放置圖片和要居中對齊的文字。例如：

<div class="container">
<img src="example.jpg" alt="example image">
<p class="caption">這是圖片標題</p>
</div>

其中，.container是包含圖片和文字的容器，.caption是圖片的標題。接下來，我們可以使用CSS實現文本和圖片的居中對齊。
首先，我們需要設置.container的position為relative，這樣我們才能通過相對定位將文字放在圖片上。接下來，設置.caption的position為absolute，top和left都設置為50%，這樣.caption會跳到.container的中心。

.container {
position: relative;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
}

但是，這時.caption只會使其左上角到達中心點，文字還沒有居中對齊。為此，我們可以添加transform屬性，將.caption向左上方移動自身寬度和高度的一半，使其居中對齊。

.container {
position: relative;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這樣，文字就能夠完美的居中對齊在圖片上了。如果需要調整文字和圖片之間的距離，可以通過margin屬性來實現。
綜上所述，使用CSS讓文字居中對齊在圖片上并不難，只需要了解一些基礎的CSS知識即可。