在網頁開發中，經常會遇到圖片不居中對齊的問題。這是因為默認情況下，圖片是按照它們的左上角對齊的，而不是按照中心對齊。為了解決這個問題，我們可以使用CSS來控制圖片的對齊方式。 首先，讓我們看一下一個不居中對齊的圖片的實例。下面是一個簡單的HTML代碼塊，它包含一張圖片和一段文本。

這是一張圖片：
這是一段文本。

如果我們這樣設置CSS，它將導致該圖片不居中對齊：

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

這將把圖片向左浮動，并在右側留下10個像素的空白。這意味著圖片的左上角將與文本的基線對齊，而不是它的中心點。為了讓圖片居中對齊，我們可以使用這些CSS樣式：

img {
display: block;
margin: 0 auto;
}

這將把圖片設置為塊級元素，并使用auto值設置左右邊距。這將使圖片居中對齊。如果您想讓某個圖像在其容器內水平居中對齊，而不是整個頁面，您可以使用以下CSS樣式：

.container {
text-align: center;
}
.container img {
display: inline-block;
}

這設置了一個名為.container的容器，它左右居中其內部的任何內容。它還將圖像設置為內聯塊，使其可以根據需要在容器內居中對齊。 總的來說，對齊圖像可能看起來像是微不足道的細節，但它對于網頁的外觀和體驗有很大的影響。使用CSS來控制圖像的對齊方式可以確保您的網頁看起來整潔、專業和一致。