淘先锋技术网

首页 1 2 3 4 5 6 7

CSS是Web开发中最重要的技术之一,它可以实现Web页面的各种样式,其中包括图片下方写文字的功能。在传统的HTML中,我们可以使用<img>标签嵌入图片,但是文字需要借助其他标签才能实现。而在CSS中,我们可以通过display属性来控制图片和文字的排列方式。

// HTML代码
<div class="img-wrap">
<img src="example.jpg">
<p>这是一段图片下方的文字</p>
</div>
// CSS代码
.img-wrap {
text-align: center;
}
.img-wrap img {
display: block;
margin: 0 auto;
}
.img-wrap p {
margin-top: 10px;
}

在上面的代码中,我们首先使用一个<div>标签来包裹图片和文字。然后,我们使用text-align属性将图片和文字都居中对齐。接着,我们使用display:block属性来确保图片和文字都单独占据一行,并使用margin:0 auto属性将图片水平居中。

最后,我们只需要设置文字的margin-top属性来实现文字在图片下方显示,并控制文字与图片之间的距离。

通过上述代码,我们就可以实现图片下方显示文字的效果。这不仅可以增强页面的美观度,还可以更好地表达页面的信息。