CSS是實現網頁布局的重要技術，其中圖片排列也是一個常見的需求。本文將介紹如何使用CSS實現圖片的垂直排列。 首先，需要準備一組需要垂直排列的圖片，如下所示： 接著，我們需要使用CSS來控制圖片的垂直排列。在CSS中，可以使用display屬性來指定元素的顯示方式，其中block表示塊級元素，具有獨占一行的特點。因此，我們可以將圖片包裹在一個div塊級元素中，并設置每個圖片的display屬性為block，代碼如下：

<div>
<img src="image1.png" style="display:block">
<img src="image2.png" style="display:block">
<img src="image3.png" style="display:block">
</div>
css代碼：
div img {
display: block;
}

這樣，圖片就可以自動垂直排列了。如果需要調整圖片之間的間距，可以使用margin屬性來控制，如下所示：

div img {
display: block;
margin-bottom: 10px;  /* 控制圖片之間的間距 */
}

如果需要將圖片居中顯示，可以將div元素的text-align屬性設置為center，代碼如下：

div {
text-align: center;
}
div img {
display: block;
margin-bottom: 10px;
}

上述代碼可以將包含圖片的div元素居中顯示，同時每個圖片之間保留10像素的間距。 總之，使用CSS實現圖片的垂直排列并不困難，只需要將圖片包裹在一個塊級元素中，并設置display屬性為block即可。此外，通過設置margin屬性可以控制圖片之間的間距，通過設置text-align屬性可以控制圖片居中顯示。希望本文對你有所幫助！