Div居中失效求助：设置text-align:center仍左浮动

嘿，我懂你现在的困扰——把几个左浮动的Div放进设置了text-align: center;的middleBox容器里，结果完全没达到居中效果，对吧？这其实是因为float属性会让元素脱离正常的文档流，text-align: center;对浮动元素根本起不到作用。咱们来用两种实用的方法解决这个问题：

方案一：改用inline-block布局（兼容性好） #

这是比较经典的解决思路，调整子元素的显示方式，让父容器的居中设置生效：

• 先把那几个Div（#groupInsurance、#lifeInsurance、#dentalInsurance）的float属性删掉，换成display: inline-block;
• 要是子元素之间出现了莫名的间距，可以给父容器#middleBox加个font-size: 0;，再给子Div单独恢复字体大小就行
• 此时父容器的text-align: center;就能正常让子元素水平居中了

修改后的CSS代码参考：

#middleBoxMargin { margin-top: 80px; }
#middleBox { 
  text-align: center; 
  /* 解决inline-block元素间的默认间距 */
  font-size: 0; 
}
#groupInsurance, #lifeInsurance, #dentalInsurance {
  background-color: #EEEEEE;
  text-align: center;
  height: 145px;
  /* 移除float，改用inline-block */
  display: inline-block;
  /* 恢复子元素的字体大小 */
  font-size: 16px;
  /* 可选：给子元素加左右间距 */
  margin: 0 10px;
}

方案二：用Flexbox布局（现代简洁） #

如果你的项目不需要兼容太老的浏览器，Flexbox是更省心的选择，直接通过父容器的属性就能实现居中：

• 给#middleBox设置Flex相关属性，不需要管子元素的float，直接删掉就行
• 一行代码就能让子元素水平居中，还能轻松设置间距

修改后的CSS代码参考：

#middleBoxMargin { margin-top: 80px; }
#middleBox { 
  display: flex;
  justify-content: center; /* 实现水平居中 */
  gap: 20px; /* 子元素之间的间距，按需调整 */
}
#groupInsurance, #lifeInsurance, #dentalInsurance {
  background-color: #EEEEEE;
  text-align: center;
  height: 145px;
  /* 移除原来的float属性 */
}

补充：为什么原来的方法无效？ #

text-align: center;的作用对象是行内元素、行内块元素，而设置了float的元素会脱离正常文档流，变成独立的块级浮动元素，所以父容器的text-align设置对它们完全不起作用。

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