CSS中的圖片對齊問題是我們開發者經常會遇到的問題。在網頁布局中，對于圖片的對齊問題，我們可以使用CSS來進行控制。 首先，我們使用pre標簽來展現下面的代碼。這些都是常用的圖片樣式屬性。

img {
display: block;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
max-width: 100%;
height: auto;
}

其中，display:block屬性可以讓圖片依次顯示。在這個屬性下面，我們還可以設置“float”的屬性。float屬性可以讓單個圖片靠左或靠右顯示。我們可以這樣設置：

img {
float: left;
margin-right: 10px;
}

接下來考慮一些高級圖片布局問題。如果我們需要讓圖片在垂直方向上的對齊，則可以使用vertical-align屬性。比如：

img {
vertical-align: middle;
}

如果圖片需要水平對齊最好使用和它方向相同的塊級元素包裹。這樣可以避免使用嵌套的標簽。為此，我們的代碼如下：

.image-wrap {
text-align: center;
}
.image-wrap img {
display: inline-block;
vertical-align: middle;
}

在上面的代碼中，我們創建了一個div元素，它的文本對齊方式是居中。接著，我們把圖片放在div元素里面，然后設置圖片為“inline-block”的元素，這樣就能夠解決水平對齊的問題。最后，我們使用vertical-align屬性來保證圖片垂直居中。 總之，在進行圖片對齊的時候，我們需要不斷嘗試不同的方法。有時候，一個簡單的屬性更容易實現我們想要的效果。在實現圖片對齊的時候，我們需要記住最重要的事情是保持我們的代碼易于維護和改進。