Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
33
rated 0 times [  34] [ 1]  / answers: 1 / hits: 61191  / 10 Years ago, tue, march 18, 2014, 12:00:00

I trying make a hanoi tower.



I want to put the control part be centre as , so I checked Bootstrap and using class=center-block, but nothing work, like this: no

(source: 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;
}


Quesition



How can I make this div <div id=ctrl class=center-block> be centred?


More From » html

 Answers
3

Demo Fiddle



You need to add the class text-center to the div with the id panel-body.



Change your HTML to:



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


Or change your CSS to add:



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


All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.


[#71923] Monday, March 17, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
rhett

Total Points: 671
Total Questions: 100
Total Answers: 102

Location: Hong Kong
Member since Tue, Oct 19, 2021
3 Years ago
rhett questions
Thu, Oct 28, 21, 00:00, 3 Years ago
Mon, Aug 2, 21, 00:00, 3 Years ago
Fri, Dec 11, 20, 00:00, 3 Years ago
Fri, Aug 7, 20, 00:00, 4 Years ago
Thu, Mar 26, 20, 00:00, 4 Years ago
;