最近在做一個網站開發的項目，需要在頁面上添加一些圖片，但是發現圖片無法居中對齊。我嘗試了很多方法，但都沒有解決問題。最后，我發現是 CSS 的問題，下面我將分享一下我的解決方案。 首先，我使用了以下的 HTML 代碼來添加圖片：

<div class="container">
<img src="image.jpg" alt="image">
</div>

接下來，我嘗試了以下的 CSS 代碼來居中對齊：

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

然而，我發現這個方法并不能解決問題。我嘗試了修改 `display` 屬性為 `inline-block` 和 `inline`，但也沒有任何效果。 最后，我發現該問題是由于圖片的寬度超出了容器的寬度。因此，我添加了以下的 CSS 代碼來解決問題：

.container {
text-align: center;
}
.container img {
max-width: 100%;
height: auto;
}

這個方案的實現效果非常好，因為它將圖片的最大寬度設置為容器的寬度，并且同時讓容器的文本對齊方式為居中。 總結一下，當你遇到圖片無法居中對齊的問題時，可以使用以上的 CSS 代碼來解決它們。在設置圖片的寬度時，確保圖片的寬度不會超出容器的寬度，這樣在添加樣式時就能夠很好地處理問題。