CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nighthawk
nighthawk

Reputation: 842

Center content inside bootstrap column

I have problem centering content of column. Here is part of layout:

<div class="tab-pane fade" id="AccountState">
   <div class="col-md-12">
      <div class="center-block" id="mainDiv" style="overflow:auto">
         <div class="stateItem" id="AlarmBurglary">
            <p class="stateText" data-localize="_Burglary">_Burglary</p>
            <img id="stateImg" src="img/ball_red48.png" alt="stateImg" />
         </div>
         <div class="stateItem" id="AlarmPanic">
            <p class="stateText" data-localize="_Panic">_Panic</p>
            <img id="Img1" src="img/ball_red48.png" alt="stateImg" />
         </div>
         ....
      </div>
  <div>
</div>

My problem is that i can't center these 'stateItem' divs inside this mainDiv. As you see, i tried center-block but items still stay aligned left.

Classes stateItem, stateText and stateImg dont have any kind of style regarding positioning - only width, height and padding.

Upvotes: 1

Views: 813

Answers (1)

duatis
duatis

Reputation: 184

To center any container that its display type is block, as they fill all the horizontal space that have available, you have to give it a width and then set its margin with auto. See the snippet:

div {
  background: tomato;
  padding: 15px;
}
.centered {
  background: #FFF;
  width: 50%;
  margin: auto;
}
<div>
  <div class="centered">
    Centered DIV
  </div>
</div>

Upvotes: 2

Related Questions