[分享]css兼容img水平居中显示

CSS兼容img水平居中显示是前端开发中经常遇到的问题。对于不同浏览器的兼容性，在开发过程中一定要深入了解和掌握，才能避免因浏览器兼容问题导致页面出现错位等问题。/ CSS代码 / img{ disp...

CSS兼容img水平居中显示是前端开发中经常遇到的问题。对于不同浏览器的兼容性，在开发过程中一定要深入了解和掌握，才能避免因浏览器兼容问题导致页面出现错位等问题。

/* CSS代码 */
img{
  display: block;
  margin: 0 auto;
} 

上述CSS代码可以实现对img图片的水平居中显示。该代码内容分为两部分，分别是display和margin。

display: block

display属性控制元素以何种方式显示，block表示元素将被显示为块级元素。块级元素的特点是在页面中占据一整行空间，且可设置宽度、高度等样式属性。

margin: 0 auto

margin负责控制元素的外边距，0表示不设置上下外边距，auto表示左右外边距均设置为自动。

通过该段代码，可以实现对img图片的水平居中，同时不影响垂直方向的排列。但需要注意的是，该段代码在部分浏览器上可能会存在兼容性问题（如IE6等），因此需要在开发中及时查看浏览器兼容性，做好相应优化。