css在图下加字

CSS是一种层叠样式表语言，可以用于控制网页的样式，包括文字排版、颜色、大小、位置等。在网页设计中，经常需要在图片下方加上一行字，来说明图片的内容或作用。下面就来介绍一下如何使用CSS在图片下添加文字的方法。

img {
    display: block;
     /* 将图片转换为块级元素 */margin-bottom: 10px;
 /* 图片下方留出一定的空白 */}
.caption {
    text-align: center;
     /* 文字居中 */font-size: 14px;
     /* 字体大小 */margin-top: 5px;
     /* 文字与图片之间的间隔 */color: #333;
 /* 文字颜色 */}
    

首先，我们将图片转换为块级元素，这样才能在图片下方添加其他元素，比如文字。接着，我们给图片设置一个下边距，留出一定的空白。这样可以使图片与文字之间有一定的距离，避免过于拥挤。

然后，我们在HTML中添加一个类名为.caption的元素，在CSS样式中设置该元素的样式。我们让文字居中显示，设置文字大小为14px，设定一个5px的顶部边距来与图片分隔开来。我们还可以设定文字颜色，这样可以让文字与页面背景有一定的对比度。

最后，我们只需要将文字节点添加到.caption元素中即可。代码如下：

这是一张图片的说明文字

我们使用一个div元素来装载图片及其说明文字。在div元素中，我们先放置img元素，然后再添加一个.caption的div元素来放置说明文字。这样，说明文字就会在图片下方居中显示了。

总结一下，使用CSS在图片下方添加文字可以使网页更加美观，易于阅读。我们只需要将图片转换为块级元素，采用一定的排版方式来设置文字的样式，然后将文字添加到相应的位置即可。希望这篇文章对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！