AEM容器保留float:left属性实现max-width:1280px居中对齐求助

失效原因 #

浮动元素会脱离常规文档流，margin: auto 规则对浮动元素不生效；同时float属性优先级高于display: inline-block，你原有写法里的inline-block配置不会生效，因此无法实现居中效果。

可行方案（无需修改HTML结构，兼容原有float逻辑） #

你只需要调整自定义类.custom-container的样式，利用相对定位+平移的方式实现居中，完全不会影响原有float带来的布局逻辑：

.custom-container{
  border: 1px solid red;
  max-width: 1280px;
  /* 新增以下3行配置，删除原有无效的margin:auto、display:inline-block即可 */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.container{
    float: left;
    clear: none;
    width: 100%;
    box-sizing: border-box;
}

实现原理 #

• position: relative 基于元素原有位置定位，不会改变元素在布局流中的占位，不会打乱依赖float的其他布局规则
• left: 50% 让元素的左边界相对于父容器向左偏移父容器宽度的50%
• transform: translateX(-50%) 让元素基于自身宽度向左偏移50%，刚好实现水平居中
• 原有max-width:1280px规则会正常生效：视口宽度大于1280px时容器宽度固定为1280px，小于1280px时宽度占满父容器，符合需求。

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