1

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.

nighthawk
  • 773
  • 7
  • 30
  • This might help (possibly a duplicate?): http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3 – Dan Cohen Sep 03 '15 at 13:49
  • @DanCohen i tried many solutions but i think this is quite specific problem... Over there, they suggest center-block, 0 margins and few others (which i all tried)... – nighthawk Sep 03 '15 at 13:52
  • Neither center-block nor margin:auto will work unless you get rid of the 'float' that bootstrap uses to manage columns. You might also try text-align: center. edit - Scratch that, apparently margin:auto can work as long as you set a width. – Dan Cohen Sep 03 '15 at 14:04

1 Answers1

2

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>
duatis
  • 184
  • 7
  • This set me on right path... I changed width to 85% and now is centered but second row is problem. If i fix it, i will accept answer and add my modifications! – nighthawk Sep 03 '15 at 13:59