CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
randombits
randombits

Reputation: 48490

Center two divs in a bootstrap 2.3.2 row

I have two divs I'd like to center align in a row side by side. What I have currently centers them but vertically, with one div above the other. What's the correct way to have them in the center of the row left-to-right.

HTML:

<div class="row-fluid">
  <div class="span12" style="border: 1px solid black;">
    <div class="span2 center" style="border: 1px solid blue;">
      <p>
        This is div1 ...
      </p>
    </div>
    <div class="span2 center" style="border: 1px solid red; float:left;">
      <h4>Header in div 2</h4>
      <div>
        <p>
          This is div 2 ...
        </p>
      </div>
    </div>
  </div>
</div>

CSS:

  @media (min-width: 1076px) and (min-width: 979px) {
    .row-fluid .span2 {
      margin-left: 5.5%;
    }
  }

  @media (max-width: 979px) and (min-width: 768px) {
    .row-fluid .span2 {
      margin-left: 5.5%;
    }
  }

  .center {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

jsfiddle: https://jsfiddle.net/v7oucy63/

Upvotes: 0

Views: 881

Answers (1)

Jason Rey
Jason Rey

Reputation: 131

jsfiddle: https://jsfiddle.net/v7oucy63/1/

I would use display: inline-block on the elements, and then add a text-align: center on the parent container. Keep in mind that text-align: center will affect all the children node, so add another text-align: left to the element.

Upvotes: 1

Related Questions