web-dev-qa-db-fra.com

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

J'essaye de faire une tour de hanoi.

Je veux mettre la partie de contrôle au centre, j'ai donc vérifié Bootstrap et en utilisant class="center-block", mais rien ne fonctionne, comme ceci: pas de centre http://wuzhiwei.net/problems/no-center.png

DÉMO .

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

Comment puis-je faire ce div <div id="ctrl" class="center-block"> être centré?

javascripthtmlcsstwitter-bootstrap
30
Tim

violon de démonstration

Vous devez ajouter la classe text-center au div avec le idpanel-body.

Changez votre HTML en:

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

Ou changez votre CSS pour l'ajouter :

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

Toute la classe center-block fait est de dire à l'élément d'avoir une marge de 0 auto, le auto étant les marges gauche/droite. Cependant, à moins que la classe text-center ou css text-align:center; est défini sur le parent, l'élément ne connaît pas le point de départ de ce calcul auto et ne se centre donc pas comme prévu.

31
SW4

Ajoutez cette classe dans votre css

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

DÉMO

3
Girish

Vous pouvez soit utiliser un fixe avec (disons 400px) et une marge: 0 auto;

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

DÉMO

Ou vous pouvez simplement utiliser text-align: center;

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

DEMO2

3
Kees Sonnema

Essayez text-align:center au div .center-block

0
James