javascript - bootstrap v3 components




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

Sto cercando di costruire una torre hanoi.

Voglio mettere la parte di controllo al centro, quindi ho controllato Bootstrap e usando class="center-block" , ma niente funziona, come questo: nessun centro 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

Come posso rendere centrato questo div <div id="ctrl" class="center-block"> ?


Demo Fiddle

È necessario aggiungere la classe text-center al div con il panel-body id .

Cambia il tuo HTML in:

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

O cambia il tuo CSS per aggiungere :

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

Tutto il center-block della classe fa dire all'elemento di avere un margine di 0 auto , l' auto è il margine sinistro / destro. Tuttavia, a meno che la classe text-center o css text-align:center; è impostato sul genitore, l'elemento non conosce il punto in cui calcolare questo calcolo auto quindi non si centrerà come previsto.


Aggiungi questa classe nel tuo css

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

DEMO


Puoi usare un fisso con (diciamo 400px) e margine: 0 auto;

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

DEMO

Oppure puoi semplicemente usare text-align: center;

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

DEMO2


aggiungi questa lezione nel tuo css

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

in bocca al lupo!





twitter-bootstrap