CSS 是一种用于网站设计的语言，它可以让网页的外观更加美观和易于阅读。其中，图片与文字的搭配是非常常见的设计风格，图片下方加上文字也是一个常见的做法。那么，接下来就来教大家使用 CSS 实现图片下带文字的方法。

<div class="img-text">
<img src="img.png" alt="这是一张图片">
<p>这是图片下方的文字。</p>
</div>
.img-text {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.img-text img {
width: 100%;
max-width: 400px;
}
.img-text p {
font-size: 18px;
font-weight: bold;
margin: 10px 0 0;
}

首先，我们需要将图片和文字放在一个 div 容器里并且设置容器的样式。容器使用 inline-flex 布局，使得容器内部元素可以垂直方向上居中对齐，并且使用 text-align 属性使得文字居中显示。接下来，我们需要设置图片和文字的样式。

图片可以设置宽度为 100% 以使其具有响应式的特性，并且设置最大宽度防止图片过大。文字可以设置字号和粗细，并且设置一个 margin-top 的间距。

这样，一个图片下带文字的效果就实现了。如果你想要对这个示例进行调整，可以尝试使用 padding 和 margin 控制图片和文字的间距，以及调整样式达到更加个性化的效果。