[分享]css中字在图片的下方

在前端开发中，经常需要在网页中添加图片，同时又需要在图片下方加上文字说明。这时候就需要用到CSS中的一种技术，即将字放在图片的下方。 img { display: block; margin: aut...

在前端开发中，经常需要在网页中添加图片，同时又需要在图片下方加上文字说明。这时候就需要用到CSS中的一种技术，即将字放在图片的下方。

 img {
    display: block;
    margin: auto; /* 居中显示图片 */
  }
  p {
    text-align: center; /* 文字居中显示 */
    margin-top: 10px; /* 文字与图片之间的间距 */
  } 

在上面的代码中，我们将图片设置为块级元素，并让其居中显示。对于文字，则是让其居中显示，并与图片之间留出一定的间距。

如果想要更进一步的美化，可以尝试在图片周围添加一些圆角或者阴影等特效。在实际项目中，可以根据需要调整CSS属性，实现更加符合设计要求的效果。