在網(wǎng)頁設計中，常常出現(xiàn)在圖片下方添加文字的情況，如果想讓文字在圖片下方居中顯示，需要使用CSS樣式來設置。下面就介紹一下如何使用CSS樣式來實現(xiàn)這一效果。 首先，需要使用以下代碼來設置圖片及文字的HTML結(jié)構(gòu)，代碼如下：

<div class="container">
<img src="xxx.jpg" alt="圖片">
<p>這是文本內(nèi)容</p>
</div>

其中，<div>標簽用來包含圖片和文字，<img>是圖片的標簽，<p>是文本的標簽。 接下來，需要使用以下CSS樣式來設置圖片和文字的位置和居中方式，代碼如下：

.container {
position: relative; /* 把父元素設置為相對定位 */
text-align: center; /* 把文字居中 */
}
.container img {
display: block; /* 把圖片設置為塊級元素 */
margin: auto; /* 上下左右居中 */
}
.container p {
position: absolute; /* 把文本設置為絕對定位 */
bottom: 0; /* 把文字置于底部 */
left: 0; /* 把文字置于左側(cè) */
right: 0; /* 把文字置于右側(cè) */
}

其中，position: relative;是把父元素設置為相對定位，讓子元素在相對于父元素的基礎上進行定位。text-align: center;是把文本居中。而display: block;是把圖片設置為塊級元素，使圖片能夠和文本在同一行顯示。而通過設置position: absolute;，bottom: 0;，left: 0;，right: 0;，可以將文本置于底部并且居中顯示。 通過以上樣式設置，就可以輕松實現(xiàn)文字在照片下居中的效果了。