使用浮动布局的CSS与HTML代码如何实现所有图片居中显示

解决方案 #

你当前代码存在两处影响居中的问题：

• 你有4个图片列，但.column宽度设置为33.33%（仅适配3列布局），宽度溢出会导致第4个元素换行，打乱布局
• 未给列容器设置内容居中规则，图片作为行内替换元素默认左对齐

方案1：保留原有浮动布局，修改CSS即可 #

/* 4个图片容器，宽度设为25% */
.column {
  float: left;
  width: 25%;
  padding: 5px;
  text-align: center; /* 让容器内图片水平居中 */
}

/* 原有浮动清除规则保留即可 */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* 可选：需要垂直居中时添加 */
.column img {
  vertical-align: middle;
}

方案2：改用更简洁的Flex布局（推荐），无需处理浮动清除 #

.row {
  display: flex;
  /* 可选：如果需要整行的列整体在页面中居中，开启下行 */
  /* justify-content: center; */
}
.column {
  width: 25%;
  padding: 5px;
  text-align: center; /* 单列内图片水平居中 */
}

全局所有图片居中设置 #

如果你需要页面内所有图片（不受父容器限制）都居中显示，可添加全局规则：

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

内容的提问来源于stack exchange，提问作者Riaz