在网页设计中，图片是设计者经常使用的元素，而图片下方的文字更是可以起到补充图片信息、加强网页表现力的作用。本文将介绍一种实现图片下方带文字的方法-使用CSS。
这是一张示例图片的描述文字/* CSS代码 */ .pic { display: block; max-width: 100%; height: auto; margin-bottom: 10px; } .text { text-align: center; font-size: 16px; color: #999; }
要实现图片下方带文字，需要在HTML中使用标签插入图片，然后在图片下方添加一个
元素，用来显示文字。CSS中，使用.display属性将图片设置为块级元素，使其可以在页面中独占一行。另外，通过最大宽度和自适应高度，避免了图片过大或变形的问题。使用.margin-bottom属性添加底部间距，使文字与下方元素间隔一定距离。
接下来，我们使用CSS设置文字样式。使用.text-align属性让文字居中显示。使用font-size属性设置文字大小，color属性定义文字颜色。根据需要，您可以根据需要自定义样式。
到此，我们已经成功实现了一张图片下方带有文字的效果。通过CSS的设置，我们可以灵活地调整图片和文字间距，甚至可以使用媒体查询设置针对不同设备的显示效果。