.image { display: block; /* 将图片设置为块级元素 */ margin: 0 auto; /* 水平居中 */ } .text { text-align: center; /* 文字居中 */ font-size: 18px; /* 字号 */ font-weight: bold; /* 字体加粗 */ }
上面的代码中,大家首先将图片设置为块级元素,这样图片下方才能添加文字。其次,大家将文字居中,并设置字号和加粗,使得文字更加突出。接下来,大家看一下具体的HTML结构:
<div class="container"> <img src="path/to/image.jpg" alt="图片"> <p class="text">这里是图片描述文字</p> </div>
在HTML中,大家将图片和文字都放入一个容器中,并且为文字添加了样式class=”text”。这样,CSS中的样式就能正确地应用到文字上,并且将它们放置在图片下方。
在实际开发中,大家还可以添加更多的CSS样式,如修改文字颜色、增加文字阴影等等。通过灵活运用CSS,大家可以打造出更加炫酷、富有个性的网页设计。