在网页设计中，常常出现在图片下方添加文字的情况，如果想让文字在图片下方居中显示，需要使用CSS样式来设置。下面就介绍一下如何使用CSS样式来实现这一效果。 首先，需要使用以下代码来设置图片及文字的HTML结构，代码如下：

<div class="container">
<img src="xxx.jpg" alt="图片">
<p>这是文本内容</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; /* 把文字置于左侧 */
right: 0; /* 把文字置于右侧 */
}

其中，position: relative;是把父元素设置为相对定位，让子元素在相对于父元素的基础上进行定位。text-align: center;是把文本居中。而display: block;是把图片设置为块级元素，使图片能够和文本在同一行显示。而通过设置position: absolute;，bottom: 0;，left: 0;，right: 0;，可以将文本置于底部并且居中显示。 通过以上样式设置，就可以轻松实现文字在照片下居中的效果了。