css中图片水平居中对齐 |js修改css显示

// HTML代码
<div class="container">
<img src="image.png">
</div>
// CSS代码
.container {
text-align: center;
}
.container img {
display: inline-block;
}

以上代码实现的方法是将包含图片的容器设置为居中对齐，然后给图片设置为行内块元素，这样就能让图片在容器中水平居中对齐了。

// HTML代码
<div class="container">
<div class="img-wrapper">
<img src="image.png">
</div>
</div>
// CSS代码
.container {
text-align: center;
}
.img-wrapper {
display: inline-block;
}
.img-wrapper img {
display: block;
margin: 0 auto;
}

以上代码实现的方法是在包含图片的容器外再套一层div，然后将这层div设置为inline-block，最后将图片设置为块级元素，设置左右margin为auto，这样就能实现水平居中对齐了。

需要注意的是，以上方法均需要保证包含图片的容器宽度小于或等于页面宽度。