css上面图片下面是文字布局

在网页设计中，常常需要使用到一种“上图下文”的布局方式。这种布局方式可以将图片和文字结合在一起，更好地表达网页的主题和内容。在此，我们就来介绍一种实现“上图下文”布局的方法——使用CSS。

.img-text {
    display: flex;
    flex-direction: column;
}
.img-text img {
    margin-bottom: 20px;
} 

上面的代码中，“.img-text”是一个类名，用于表示我们要实现“上图下文”布局的元素。通过“display: flex;”属性，我们将该元素设置为一个弹性盒子，使得子元素可以根据需要进行自适应布局。“flex-direction: column;”属性则表示该弹性盒子的主轴方向为垂直方向，即图片和文字将按照上图下文的方式进行排列。

除了设置弹性盒子的样式，我们还需要对图片和文字的样式进行一些调整。比如，我们需要通过“margin-bottom: 20px;”属性来为图片和文字之间添加一些行间距，使得整个布局更加美观。

有了以上的CSS样式设置，我们就可以在网页中轻松实现“上图下文”的布局方式了。