Div Not Center使用class =＆＃34; center-block＆＃34;在Bootstrap中

Question

我想做一个河内塔。

我想把控制部分放在中心位置，所以我检查了Bootstrap并使用class="center-block"，但没有任何效果，如下所示：no centre http://wuzhiwei.net/problems/no-center.png

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

如何让这个div <div id="ctrl" class="center-block">居中？

Answer 1

Demo Fiddle

您需要使用text-center div将id课程添加到panel-body。

将您的HTML更改为：

<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>

或change your CSS to add：

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

所有课程center-block的作用是告诉该元素的边距为0 auto，auto为左/右边距。但是，除非在父级上设置了类text-center或css text-align:center;，否则该元素不知道计算此auto计算的点，因此不会按预期将其自身居中。< / p>

Answer 2

在您的CSS中添加此类

.center-block{
    text-align: center;
}

DEMO

Answer 3

您可以使用固定的（例如400px）和margin：0 auto;

.center-block{
    width: 400px;
    margin: 0 auto;
}

DEMO

或者您可以使用text-align：center;

.center-block{
    text-align: center;
}

DEMO2

Answer 4

尝试text-align:center到div .center-block

Answer 5

在你的css中添加这个类

.center-block{
  margin: 0px auto;
  display: block;
}

祝你好运！