CSS使用Float属性实现4x3图片网格无法居中问题求助

问题核心原因 #

float属性会让元素脱离正常文档流，设置了浮动的父容器默认宽度会收缩到和子内容一致，且本身会停靠在页面左侧/右侧，你给内部table设置的margin: 0 auto只能在浮动父容器的有限宽度内生效，无法实现相对于页面的居中效果。同时你的代码还存在两处小问题：

• th样式规则缺少分号分割，正确写法是padding: 5px; float: initial;
• 所有img元素重复使用了同一个idimage1，id在单个页面内必须唯一，可改为类名或者不同id

解决方案1（保留现有table结构，快速修复居中） #

直接删除.img类的float: right规则即可，你的table本身已经设置了margin-left: auto; margin-right: auto，外层div默认宽度为100%页面宽度，table会自动居中：

/* 删掉这部分即可 */
/* .img {
  float: right;
} */

解决方案2（纯float实现网格，不使用table） #

如果你的目标是用float实现4列3行网格，完全不需要嵌套table，代码更简洁：

修正后的CSS代码

body {
  background-image: url("images/ThanksGivingBG.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  color: Orange;
  text-shadow: 2px 2px 4px OrangeRed;
  text-align: center;
  font-size: 25px
}

/* 外层网格容器，设置宽度后用margin: 0 auto居中 */
.img-grid {
  width: 872px; /* 200px宽+2px边框*4张 + 5px间距*3间隙 = 刚好容纳4张一行 */
  margin: 0 auto;
  overflow: hidden; /* 清除浮动 */
}

.img-grid img {
  height: 150px;
  width: 200px;
  margin: 0 5px 10px 0; /* 图片之间的间距 */
  float: left;
  border: 2px solid black;
}

/* 每行第4张图片去掉右侧margin，避免换行 */
.img-grid img:nth-child(4n) {
  margin-right: 0;
}

修正后的HTML代码

<div class="img-grid">
  <img src="images/ThanksGiving1.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving2.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving3.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving4.jpg" alt="感恩节图片">
  <img src="images/ThanksGiving5.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving6.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving7.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving8.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving9.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving10.jpg" alt="感恩节图片">
  <img src="images/ThanksGiving11.jpeg" alt="感恩节图片">
  <img src="images/ThanksGiving12.jpg" alt="感恩节图片">
</div>

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