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

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

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

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

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

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

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