左右边距、边距、显示：块/内联块自动在 div 上不起作用答案

【问题标题】：margin-right and left, margin, display:block/inline-block auto not working on div左右边距、边距、显示：块/内联块自动在 div 上不起作用
【发布时间】：2021-11-09 10:36:56
【问题描述】：

我在 AEM 中有一个场景，它在容器级别默认 AEM 的 CSS 为 float: left，因为整个流程都会受到影响，所以无法删除它，但是在同一个 div 上，我需要实现 max-width:1280px与中心对齐。以下代码无法删除类容器，我必须添加一个额外的类来实现它。到目前为止我尝试过的代码。注意：我不能删除浮动属性，因为它的核心组件。任何帮助将不胜感激！

.custom-container{
  border: 1px solid red;
  max-width: 1280px;
  margin-left: auto;
  margin-right:auto;
  display: inline-block;
 }
.container{
    float: left;
    clear: none;
    width: 100%;
    box-sizing: border-box;
}

<div class="container custom-container">
<div class="sub-value">
 <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

【问题讨论】：

标签： html css css-float margin display

【解决方案1】：

我不知道您可以更改什么以及不可以更改什么，但这可能会起作用：

<html>
  <head>
    <script>
      function changeWidth(newWidth) {
        document.getElementById("test").style.width = newWidth;
      }
    </script>
    <style media="all">
      .custom-container {
        max-width: 100%;  /* made it 100% */
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
      }
      .container {
        float: left;
        clear: none;
        width: 100%;
        box-sizing: border-box;
      }
      .sub-value {
        border: 1px solid red;
        max-width: 1280px;   /* restricted */
        margin: 0 auto;     /* centering */
      }
    </style>
  </head>
  <body>
    <div class="container custom-container">
      <div class="sub-value">
        <p
          >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged. It was popularised in the 1960s
          with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.</p
        >
        <p
          >is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry's standard dummy text ever since the 1500s, when an unknown
          printer took a galley of type and scrambled it to make a type specimen book. It
          has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged. It was popularised in the 1960s
          with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including
          versions of Lorem Ipsum.</p
        >
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

使用一些数学方法手动计算边距

.custom-container {
  border: 1px solid red;
  max-width: 1280px;
  margin: 0 max(0px, (100% - 1280px)/2);
  display: inline-block;
}

.container {
  float: left;
  clear: none;
  width: 100%;
  box-sizing: border-box;
}

<div class="container custom-container">
  <div class="sub-value">
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
      not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
      not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
      software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

【讨论】：

语法抛出错误
@ScriptHost 是否居中？
不，当我申请 margin: 0 max(0px, (100% - 1280px)/2) 时；它显示无效的属性值
@ScriptHost 在此处全角运行 sn-p。是否居中？

【解决方案3】：

你可以试试下面的css代码如下：

.custom-container {
border: 1px solid red;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
display: block;
float: none !important;
}

【讨论】：

我无法移除 float 属性，因为它是核心组件。
“自定义容器”类仅适用于 div 吗？或者它也被所有其他 div 使用？
如果“custom-container”类仅用于spacific div，您可以覆盖float属性。
它在所有地方都使用。
你能不能只为div使用其他额外的类，然后你就可以覆盖float属性。通常我们不应该在容器 div 中使用任何 flot 属性。无论如何，您也可以使容器全宽，然后使用“子值” cass 作为容器，使内部内容位于中心位置

【解决方案4】：

复制粘贴

.custom-container{ border: 1px solid red; max-width: 1280px; margin: auto; tex-align: center; }

【讨论】：