css 图片下字体是水平

在使用CSS设计网站页面时，经常需要在图片下方添加文字描述，此时需要使用CSS控制文本显示在图片的下面并保持水平对齐。以下是一份简单的代码示例，以及相关的CSS样式。

<div class="img-wrapper">
  <img src="your-image.jpg" alt="your image">
  <p class="img-caption">这是一段图片描述文字。</p>
</div>

代码中，使用了一个包含图片和文字的div元素，并且添加了一个img-caption类来控制文字的样式。

.img-wrapper {
  position: relative;
}

.img-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-family: Arial,sans-serif;
}

CSS中，我们使用position:absolute来设置文字相对于img-wrapper元素定位。bottom:0和left:0让文字定位于图片底部，并水平对齐。width:100%确保文字占据整个img-wrapper元素的空间。使用text-align:center让文字水平居中显示，font-size和font-family可根据实际需要自行调整。

通过以上CSS样式的控制，文字会垂直靠近图片底部，水平对齐在图片下方。这样设计出来的图片描述，不仅清晰明了，而且美观大方。