左右边距、边距、显示：block/inline-block auto 在 div 上不起作用

Question

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

.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>

Answer 1

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

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

Answer 2

直接复制粘贴

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

Answer 3

我不知道你可以改变什么，什么不可以，但这可能有效：

<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>

Answer 4

使用一些数学方法手动计算保证金

.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>

左右边距、边距、显示：block/inline-block auto 在 div 上不起作用

margin-right and left, margin, display:block/inline-block auto not working on div

html

css

css-float

margin

display