javascript - Div Not Center 在 Bootstrap 中使用类 ="center-block"

Question

我正在尝试 build 一座汉诺塔。

我想把控制部分放在中心，所以我检查了 Bootstrap 并使用 class="center-block" , 但没有任何效果，像这样:
_{(来源: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;
}

问题

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

Answer 1

Demo Fiddle

您需要将 text-center 类添加到 id panel-body 的 div 中。

将您的 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 的计算不会像预期的那样居中。