css将图片置于文字下方

CSS是前端开发中不可或缺的一部分，它可以轻松地控制网页的样式，包括文字、颜色、布局等。在这篇文章中，我们将介绍如何将图片置于文字下方，为页面增加更多的美观效果。

.img-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.img-text img {
  width: 100%;
  max-width: 500px;
}

首先，我们需要将图片和文字的布局进行改变。我们可以使用FlexBox布局来轻松实现这一点。在它们的共同容器中，我们可以将Flex容器的方向设置为column，这样图片和文字就会垂直堆叠。

接下来，我们需要为图片设置宽度，以使其适应其容器。我们可以使用max-width来控制图片的最大宽度，并进行缩放。这将确保图片不会超出其容器，即使容器的大小发生了变化。

在我们的示例中，我们为图片和文字的共同容器添加了一个.img-text类。这样我们只需要将.img-text类添加到需要堆叠图像和文字的HTML元素中即可。

  <div class="img-text">
    <img src="example.jpg" alt="example image">
    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed ligula velit,fringilla eget soDales vitae,gravida vel tellus.</p>
  </div>

通过以上代码，我们既可以将图片置于文字下方，也可以轻松控制布局，以满足我们的需求。

总之，CSS仍然是前端开发中不可或缺的一部分。我们可以使用它来轻松控制页面的样式和布局。这篇文章中我们讨论了如何将图片置于文字下方，通过CSS和HTML轻松实现页面的美观效果。