css图片下加文字居中

在网页设计中，经常需要将文字和图片结合起来进行美化。而CSS是一种常用的实现方式。本篇文章就将介绍如何通过CSS实现图片下加文字居中的效果。

首先，我们需要在HTML中嵌入一张图片和相应的文字：

<div class="picture">
  <img src="picture.jpg" alt="A beautiful picture">
  <p>This is a beautiful picture</p>
</div>

接下来，我们需要利用CSS对图片和文字进行美化。首先，我们将整个div居中：

.picture {
  margin: 0 auto;
}

然后，我们将图片和文字分别排列，并让它们都居中。具体来说，我们可以将图片设为块级元素，设置宽度，并让它居中。同时，我们给文字设置边框，设置宽度，且文字居中。

.picture img {
  display: block;
  width: 50%;
  margin: 0 auto;
}

.picture p {
  border: 1px solid #000;
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

这样，我们就成功地将一张图片和相应的文字结合美化。值得注意的是，以上代码中的宽度设置应该根据具体情况进行调整，以求达到最佳效果。

总结：通过CSS可以方便地实现图片下加文字居中的效果。对于需要将图片和文字结合美化的网页设计来说，这是一种非常好用的实现方式。