div没有在父div中居中，边距自动[重复]

Question

我知道我可能遗漏了一些非常明显的东西，但我尝试了 display: block; 和 margin: 0 auto;，但内部 div 没有在我的父 div 中水平居中？

.row-fluid-wrapper.row-depth-1.row-number-3 {
  display: block;
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
}

.row-fluid {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.row-fluid [class*="span"] {
  margin: 0 auto;
  border: 1px solid blue;
  display: block;
  float: left;
  min-height: 28px;
  margin-left: .2%;
  box-sizing: border-box;
  height: 150px;
}

.row-fluid .span4 {
  width: 31.914893614%;
}

<div class="row-fluid-wrapper row-depth-1 row-number-3 ">
  <div class="row-fluid ">
    <div class="span4 widget-span widget-type-custom_widget ">
      <div class="cell-wrapper layout-widget-wrapper">
        <span>
  <div class="clearfix cta-wrapper">
          <div class="cta-text">
              <p>Col 1</p>
              <p>Text.</p>
          </div>
  </div>
  </span>
      </div>
    </div>
    <div class="span4 widget-span widget-type-custom_widget">
      <div class="cell-wrapper layout-widget-wrapper">
        <span><div class="clearfix cta-wrapper">
        <div class="cta-text">
            <p>Col 2</p>
<p>Text.</p>
        </div>
</div>
</span></div>
    </div>
    <div class="span4 widget-span widget-type-custom_widget">
      <div class="cell-wrapper layout-widget-wrapper">
        <span><div class="clearfix cta-wrapper">
        <div class="cta-text">
            <p>Col 3</p>
            <p>Text</p>
        </div>
</div>
</span></div>
    </div>
  </div>
</div>

如您所见，蓝色 div 更靠左对齐而不是居中。

Answer 1

删除样式float: left，并将.row-fluid [class*="span"]类的显示属性设置为display: inline-block，如下所示。请查找working example here。

.row-fluid [class*="span"] {
    margin: 0 auto;
    border: 1px solid blue;
    display: inline-block;
    /* float: left; */
    min-height: 28px;
    margin-left: .2%;
    box-sizing: border-box;
    height: 150px;
}

Answer 2

如果理解正确，可以这样做：

在 css 上：.row-fluid [class*="span"]

添加： display: inline-block;

删除： float: left; , margin-left: .2%; , display: block;

这将导致divs.完全居中

.row-fluid-wrapper.row-depth-1.row-number-3 {
  display: block;
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
}

.row-fluid {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.row-fluid [class*="span"] {
  margin: 0 auto;
  border: 1px solid blue;
 /* display: block;*/
 display: inline-block;
  /*float: left;*/
  min-height: 28px;
 /* margin-left: .2%;*/
  box-sizing: border-box;
  height: 150px;
}

.row-fluid .span4 {
  width: 31.914893614%;
}

<div class="row-fluid-wrapper row-depth-1 row-number-3 ">
  <div class="row-fluid ">
    <div class="span4 widget-span widget-type-custom_widget ">
      <div class="cell-wrapper layout-widget-wrapper">
        <span>
  <div class="clearfix cta-wrapper">
          <div class="cta-text">
              <p>Col 1</p>
              <p>Text.</p>
          </div>
  </div>
  </span>
      </div>
    </div>
    <div class="span4 widget-span widget-type-custom_widget">
      <div class="cell-wrapper layout-widget-wrapper">
        <span><div class="clearfix cta-wrapper">
        <div class="cta-text">
            <p>Col 2</p>
<p>Text.</p>
        </div>
</div>
</span></div>
    </div>
    <div class="span4 widget-span widget-type-custom_widget">
      <div class="cell-wrapper layout-widget-wrapper">
        <span><div class="clearfix cta-wrapper">
        <div class="cta-text">
            <p>Col 3</p>
            <p>Text</p>
        </div>
</div>
</span></div>
    </div>
  </div>
</div>

Answer 3

您似乎根本没有正确使用 css 属性...

1...在row-fluid 中应用margin:0 auto 和display:block 使其居中对齐，但有width:100%，因此无需在此处使用margin:0 auto。

2...那么您在span4 中应用了margin: 0 auto 和flaot:left，这又是错误的。

3...为什么在div...中使用display:block 和width:100%...默认情况下，div 是display:block 和width:100%...

4...同样在span4 中使用margin-left:.2% div 不会在视觉上居中，因为它还会为最后一个div 添加边距...应用margin:0 .1%

5...也无需在spa4 div 中同时设置min-height 和height

您需要做的只是从span4 类中删除float:left 并将其设置为display:inline-block...您的.span4 div 将与您在父div 中使用text-align:center 一样对齐中心.row-fluid-wrapper

注意：这里我已将font-size:0 应用于父类以删除inline-block div 之间的空白，然后再次将font-size:initial 设置为内部div

这是您的代码的最小化版本

堆栈片段

.row-fluid-wrapper.row-depth-1.row-number-3 {
  text-align: center;
  border: 1px solid red;
  font-size: 0;
}

.row-fluid [class*="span"] {
  border: 1px solid blue;
  display: inline-block;
  margin: 0 .1%;
  box-sizing: border-box;
  height: 150px;
  font-size: initial;
}

.row-fluid .span4 {
  width: 31.914893614%;
}

<div class="row-fluid-wrapper row-depth-1 row-number-3 ">
  <div class="row-fluid ">
    <div class="span4 widget-span widget-type-custom_widget ">
      <div class="cell-wrapper layout-widget-wrapper">
        <div class="clearfix cta-wrapper">
          <div class="cta-text">
            <p>Col 1</p>
            <p>Text.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="span4 widget-span widget-type-custom_widget">
      <div class="cell-wrapper layout-widget-wrapper">
        <div class="clearfix cta-wrapper">
          <div class="cta-text">
            <p>Col 2</p>
            <p>Text.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="span4 widget-span widget-type-custom_widget">
      <div class="cell-wrapper layout-widget-wrapper">
        <div class="clearfix cta-wrapper">
          <div class="cta-text">
            <p>Col 3</p>
            <p>Text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>