css 为什么图片不居中 |css设置不打印

那么，图片为什么会不居中呢？其实，这个问题的原因可能有很多种。以下是一些常见情况。

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

1. 图片没有设置宽度

在没有设置宽度的情况下，图片的宽度会默认为原图的宽度。如果其容器的宽度与图片宽度不一致，那么图片就会不居中。如果大家想让图片居中，通常需要给图片设置一个固定宽度，并将左右外边距设置为“auto”。

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

2. 图片的“display”属性不是“block”

如果图片的“display”值不是“block”，那么图片就不会按照块级元素的方式居中。在这种情况下，大家可以通过将“display”属性设置为“block”，来让图片居中。

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

3. 容器元素没有居中

即使图片设置正确，但如果其容器不是居中的，图片也可能看起来不居中。在这种情况下，大家需要给其容器设置“text-align: center”属性，来使容器居中。

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

综上所述，大家需要注意图片及其容器的宽度和“display”属性，以及容器的居中方式，来确保图片居中。