CSS垂直對齊圖片是一個常見的網頁設計需求，通過簡單的CSS樣式設置可以實現。本文將介紹如何使用CSS垂直對齊圖片，并提供相應的代碼示例。 首先，我們需要使用HTML的img標簽來插入圖片，并使用CSS樣式來控制其垂直對齊。下面是一個示例代碼：

HTML代碼：

在上述代碼中，我們在img標簽中添加了一個class屬性，并將其值設置為“align-middle”。接下來，我們將會在CSS樣式中設置該class所對應的垂直對齊樣式。 下面是一個示例的CSS代碼：

CSS代碼：
.align-middle{
display: inline-block; /* 使IMG標簽不占用整行，以便進行垂直對齊 */
vertical-align: middle; /* 將IMG標簽與行內元素垂直居中對齊 */
}

在上述代碼中，我們使用了display屬性將img標簽的display設置為inline-block，這樣可以使其不占用整個行的寬度。接下來，我們使用vertical-align屬性將img標簽與周圍的行內元素垂直居中對齊，從而實現垂直對齊的效果。 需要注意的是，img標簽需要插入到有足夠寬度的容器中。如果容器的寬度不足以容納圖片，則垂直對齊效果可能不如預期。 總的來說，通過簡單的CSS樣式設置，我們可以輕松實現CSS垂直對齊圖片的效果。在實際應用中，我們可以根據具體需求靈活使用。