在網(wǎng)頁開發(fā)中，我們經(jīng)常會遇到一個問題：圖片不居中。

那么，圖片為什么會不居中呢？其實，這個問題的原因可能有很多種。以下是一些常見情況。

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

1. 圖片沒有設(shè)置寬度

在沒有設(shè)置寬度的情況下，圖片的寬度會默認為原圖的寬度。如果其容器的寬度與圖片寬度不一致，那么圖片就會不居中。如果我們想讓圖片居中，通常需要給圖片設(shè)置一個固定寬度，并將左右外邊距設(shè)置為“auto”。

img {
width: 50%;
display: block;
margin: 0 auto;
}

2. 圖片的“display”屬性不是“block”

如果圖片的“display”值不是“block”，那么圖片就不會按照塊級元素的方式居中。在這種情況下，我們可以通過將“display”屬性設(shè)置為“block”，來讓圖片居中。

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

3. 容器元素沒有居中

即使圖片設(shè)置正確，但如果其容器不是居中的，圖片也可能看起來不居中。在這種情況下，我們需要給其容器設(shè)置“text-align: center”屬性，來使容器居中。

.container {
text-align: center;
}
.container img {
display: block;
margin: 0 auto;
}

綜上所述，我們需要注意圖片及其容器的寬度和“display”屬性，以及容器的居中方式，來確保圖片居中。