1

I know I'm probably missing something really obvious, but I've tried display: block; and margin: 0 auto;, and the inner div is not centering horizontally within my parent 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>

As you can see, the blue divs are more left aligned than being in the middle.

Freddy
  • 683
  • 4
  • 35
  • 114

3 Answers3

1

Remove the style float: left and make display property as display: inline-block for the class .row-fluid [class*="span"], as follows. Please find the 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;
}
kmg
  • 499
  • 3
  • 16
0

if understood correctly this would do:

On the css for : .row-fluid [class*="span"]

Add: display: inline-block;

Remove: float: left; , margin-left: .2%; , display: block;

This will result in fully centered 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>
Ylama
  • 2,449
  • 2
  • 25
  • 50
0

It looks like you are not using css properties correctly at all...

1...applying margin:0 auto with display:block in row-fluid is aligning it center but there is width:100% so no need to use margin:0 auto here.

2...then you have applied margin: 0 auto in span4 with flaot:left, which is again wrong.

3...why are you using display:block with width:100% in div....divs are by default display:block with width:100%...

4...also using margin-left:.2% in span4 div will not center visually as it will also add margin to the last div also...apply margin:0 .1%

5...also no need to set min-height and height both in the spa4 div

What you need to do is just remove the float:left from the span4 class and set it as display:inline-block...your .span4 div will align center as you have used text-align:center in the parent div .row-fluid-wrapper

Note: Here I have applied the font-size:0 to the parent class to remove the white space between the inline-block div and then again set the font-size:initial to the inner div

Here is the minimized version of your code

Stack Snippet

.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>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57