在网页设计和开发中,图片是一个非常重要的元素。然而,有时候我们希望在图片下方添加一些文字描述,这时候就需要用到CSS样式来实现图片和文字的居中显示。首先,我们需要在HTML中添加一个图片和一段描述文字
<div class="container"> <img src="image.jpg"> <p>这是一段描述文字</p> </div>
.container { display: flex; flex-direction: column; align-items: center; text-align: center; } img { width: 100%; max-width: 500px; height: auto; } p { margin-top: 20px; font-size: 18px; color: #333; }
粉丝
0
关注
0
收藏
0