在網頁設計中，圖片是經常用到的元素之一。而如何在CSS中控制圖片的垂直方向是一個常見的問題。下面我們將介紹一些實用的CSS技巧，讓你輕松地達到垂直對齊效果。

首先，我們可以使用CSS的vertical-align屬性來控制圖片的對齊方式。該屬性可以設置在img標簽上，具體使用方法如下：

img {
vertical-align: middle; /* 垂直居中對齊 */
}

在此基礎上，我們還可以使用絕對定位或flex布局來實現更精確的垂直對齊效果。下面是使用絕對定位實現的示例：

.wrap {
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

在這里，我們給包裹圖片的容器.wrap設置了相對定位，然后將圖片的定位方式設置為絕對定位。接著，通過top和transform屬性，將圖片向上移動50%（即居中對齊）。

另外，我們還可以使用flex布局實現圖片的垂直對齊效果。具體使用方法如下：

.wrap {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-height: 100%;
max-width: 100%;
}

在這里，我們給圖片的容器.wrap添加了flex布局，并將align-items和justify-content屬性都設置為center（即居中對齊）。接著，我們對圖片進行了寬高的限制，確保圖片能夠按比例縮放。

綜上所述，使用CSS控制圖片的垂直方向可以達到很好的效果，讓頁面看起來更加精美和舒適。以上介紹的技巧只是其中的一些，實際應用過程中可以根據具體情況進行調整和優化。