Div Not Center Using class="center-block" in Bootstrap

Question

I trying make a hanoi tower.

I want to put the control part be centre as , so I checked Bootstrap and using class="center-block", but nothing work, like this:
_{(source: wuzhiwei.net)}

DEMO.

Html

<div class="container">     <div class="panel panel-default">         <div class="panel-heading">Hanoi Tower</div>         <div class="panel-body">             <canvas id="stage" class="center-block" width="400" height="220" style="border:1px black solid "></canvas>             <div id="ctrl" class="center-block">                 <label for="numsel">Disc Number：</label>                 <select id="numsel">                     <option value="3">3</option>                     <option value="4">4</option>                     <option value="5">5</option>                     <option value="6">6</option>                 </select>                 <button class="btn btn-default" id="start" value="start">Start</button>                 <label for="step">Step：</label> <span class="badge" id="step">0</span>                </div>         </div>     </div> </div> 

CSS

.panel {     min-width:400px; } #stage {     margin-bottom:15px; } #start {     margin-left:20px;     margin-right:20px; } 

Quesition

How can I make this div <div id="ctrl" class="center-block"> be centred?

Answer 1

Demo Fiddle

You need to add the class text-center to the div with the id panel-body.

Change your HTML to:

<div class="container">     <div class="panel panel-default">         <div class="panel-heading">Hanoi Tower</div>         <div class="panel-body text-center">             <canvas id="stage" class="center-block" width="400" height="220" style="border:1px black solid "></canvas>             <div id="ctrl" class="center-block">                 <label for="numsel">Disc Number：</label>                 <select id="numsel">                     <option value="3">3</option>                     <option value="4">4</option>                     <option value="5">5</option>                     <option value="6">6</option>                 </select>                 <button class="btn btn-default" id="start" value="start">Start</button>                 <label for="step">Step：</label> <span class="badge" id="step">0</span>                </div>         </div>     </div> </div> 

Or change your CSS to add:

.panel-body{   text-align:center; } 

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.