[分享]css两张图片上下排列

CSS是一种用于设计网页的语言，使得网页更加美观、互动、易于导航。本文将介绍如何利用CSS使两张图片上下排列。 .container { display: flex; flexdirection: ...

CSS是一种用于设计网页的语言，使得网页更加美观、互动、易于导航。本文将介绍如何利用CSS使两张图片上下排列。

  .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .img {
      width: 300px;
      height: auto;
      margin-bottom: 20px;
    } 

首先，我们需要一个包含两张图片的容器。这里的容器我们选用了flex布局，并且让图片垂直排列，并且居中显示。下面是CSS代码。

  <div class="container">
      <img src="image1.jpg" alt="image1" class="img">
      <img src="image2.jpg" alt="image2" class="img">
    </div> 

接下来，我们需要在HTML代码中添加两张图片的标签，并设置它们的class属性为img。同时，我们也可以设置图片的宽度和高度，并且让它们相对于容器的底部有20px的margin。

通过以上CSS和HTML的设置，两张图片就可以实现垂直排列了。