Question

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

正如您所看到的，蓝色div更左对齐而不是中间。

Answer 1

删除样式float: left并将类display: inline-block的显示属性设为.row-fluid [class*="span"]，如下所示。请找到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 ...在margin:0 auto中将display:block与row-fluid一起使用会将其对齐，但width:100%因此无需使用margin:0 auto {1}}在这里。

2 ...然后您在margin: 0 auto span4中使用了flaot:left，这又是错误的。

3 ...为什么您在display:block中使用width:100%与div一起使用....默认情况下，div display:block { {1}} ...

4 ...在width:100% div中使用margin-left:.2%也不会在视觉上居中，因为它也会为最后一个div添加边距... apply {{1 }}

5 ...也无需在span4 div中设置margin:0 .1%和min-height

您需要做的只是从height课程中移除spa4并将其设置为float:left ...您的span4 div将按照您的方式对齐中心在父div [{1}}

中使用了display:inline-block

注意：这里我已将.span4应用于父类以删除text-align:center div之间的空白区域，然后再次将.row-fluid-wrapper设置为内部div < / em>的

以下是代码的最小化版本

Stack Snippet

font-size:0

inline-block

Div不在父div中居中，并且边缘为auto

3 个答案: