css 多张图片水平居中对齐

在网页设计中，经常会遇到多张图片需要水平居中对齐的情况。这时候我们可以使用CSS样式来实现水平居中对齐的效果。

首先我们可以把需要居中对齐的图片放在一个div容器中，给该容器设置一个宽度，并且使其水平居中对齐。

.container {
      width: 800px;
     /* 设置容器宽度 */  margin: 0 auto;
 /* 让容器水平居中对齐 */}

接下来，我们可以给该容器设置text-align属性为center，这样容器中的所有元素都会水平居中对齐。

.container {
      width: 800px;
      margin: 0 auto;
      text-align: center;
 /* 让容器中的所有元素水平居中对齐 */}

最后，我们可以给每张图片设置display属性为inline-block，这样所有的图片就会水平排列，并且自动居中对齐。

.container img {
      display: inline-block;
 /* 把图片设置为行内块元素 */}
    

这样就轻松实现了多张图片水平居中对齐的效果了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！