css上图下文怎么排版

关于CSS如何实现上图下文排版
在网页设计中，常常需要将一张图片与与相关描述文字搭配在一起。这时，一种非常流行的排版方式就是“上图下文”，即以图片作为整体的顶部，下方则附上与图片内容相关的文字。
那么，如何使用CSS来实现上图下文排版呢？下面，我们就来具体介绍一下。
首先，我们需要准备好图片和相关的文字。在HTML中，可以使用img标签来插入图片，使用p标签来表示文字段落。具体代码如下：

< img src="图片地址">
<br>
< p> 文字描述 </p> 

然后，我们需要将图片和文字进行布局。这时，我们可以使用CSS的flex布局来实现。具体代码如下：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
<br>
.container img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
<br>
.container p {
  font-size: 16px;
  line-height: 24px;
  text-indent: 28px;
  text-align: left;
} 

这里，container类是一个包含图片和文字的容器。首先，我们将容器使用flex布局，并设置flex-direction为column，即垂直方向布局。align-items和justify-content则分别设置为center，表示在水平和垂直方向上居中。
对于图片部分，我们设置了width为100%，height为auto，使图片的宽度占满整个容器，并根据比例缩放高度。同时，我们还设置了margin-bottom为20px，使图片与文字之间有一定的间距。
对于文字部分，我们设置了font-size为16px，line-height为24px，text-indent为28px，text-align为left。其中，font-size和line-height分别控制文字的字号和行高，text-indent则表示首行缩进的距离，text-align控制文字的对齐方式。
最后，我们在HTML中将图片和文字放在一个class为container的div中，即可完成上图下文的排版。
总之，使用CSS的flex布局和文本排版属性，可以轻松实现上图下文排版，在网页设计中起到非常好的排版效果。