CSS上下排列圖片的方法

在CSS中，我們可以使用flex布局或者grid布局來(lái)上下排列圖片，下面分別介紹這兩種方法：

使用flex布局

Flex布局是一種非常強(qiáng)大的布局方式，可以輕松地實(shí)現(xiàn)圖片的上下排列，我們可以將圖片放入一個(gè)flex容器中，并設(shè)置flex容器的flex-direction屬性為column，這樣圖片就會(huì)按照上下順序排列，我們還可以使用flex的其他屬性來(lái)調(diào)整圖片的位置和大小。

以下代碼可以實(shí)現(xiàn)圖片的上下排列：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container img {
  width: 100px;
  height: 100px;
}

在上面的代碼中，我們創(chuàng)建了一個(gè)名為container的div元素，并將其設(shè)置為flex容器，我們將圖片放入該容器中，并設(shè)置了圖片的寬度和高度，我們使用align-items和justify-content屬性來(lái)調(diào)整圖片的位置。

使用grid布局

Grid布局是另一種實(shí)現(xiàn)圖片上下排列的方法，我們可以將圖片放入一個(gè)grid容器中，并設(shè)置grid容器的grid-template-columns屬性為1fr，這樣圖片就會(huì)按照上下順序排列，我們還可以使用grid的其他屬性來(lái)調(diào)整圖片的位置和大小。

以下代碼可以實(shí)現(xiàn)圖片的上下排列：

.container {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-content: center;
}
.container img {
  width: 100px;
  height: 100px;
}

在上面的代碼中，我們創(chuàng)建了一個(gè)名為container的div元素，并將其設(shè)置為grid容器，我們將圖片放入該容器中，并設(shè)置了圖片的寬度和高度，我們使用align-items和justify-content屬性來(lái)調(diào)整圖片的位置。