Div Not Center Используя class= "центральный блок" в Bootstrap

Я пытаюсь сделать ханойскую башню.

Я хочу, чтобы элемент управления был центром, так что я проверил Bootstrap и использовал class="center-block", но ничего не работает, например: no center 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"> центрированным?

Ответ 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, поэтому не будет центрировать себя так, как ожидалось.

Ответ 2

Добавьте этот класс в свой CSS

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

DEMO

Ответ 3

Вы можете использовать фиксированное значение (скажем 400px) и margin: 0 auto;

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

DEMO

Или вы можете просто использовать text-align: center;

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

DEMO2

Ответ 4

Попробуйте text-align:center в div .center-block

Ответ 5

добавьте этот класс в свой CSS

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

Удачи!