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

Question

我想做一个河内塔.

我想把控制部分放在中心,所以我检查了Bootstrap并使用class="center-block",但没有任何工作,如下:没有中心http://wuzhiwei.net/problems/no-center.png

演示.

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

演示小提琴

您需要将类添加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>

或者更改您的CSS以添加:

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

所有类center-block都是告诉元素有一个边距0 auto,auto即左/右边距.但是,除非在父级上设置了类text-center或css ,否则该text-align:center;元素不知道auto计算该计算的点,因此不会如预期那样居中.