Geek Answers Handbook

Unable to center div on bootstrap 3

I can not concentrate a lot of div, as I am updating the download from 2.1 to 3.0

For example, using this code:

<div id="center" class="container"> <div class="row"> <div class="btn-toolbar"> <div class="btn-group"> <a class="btn btn-default" href="#">test</a> </div> </div> <br /> <p>Am I centered ?</p> <a class="btn btn-default" href="#">Back</a> </div> </div>

I had this rule:

 #center { margin: 0 auto; }

But the result: enter image description here

Or another example: how to center this:

 <div id="center" class="container"> <div class="row"> <li class="col-md-5"> <ul class="list-unstyled"> <li><i class="icon-user"></i> aaaaaaaaa</li> <li><i class="icon-envelope"></i> bbbbbbbbbb</li> <li><i class="icon-envelopebug"></i> cccccccccccc</li> </ul> </li> <li class="col-md-5"> <ul class="list-unstyled"> <li><i class="icon-user"></i> aaaaaaaaa</li> <li><i class="icon-envelope"></i> bbbbbbbbbb</li> <li><i class="icon-envelopebug"></i> cccccccccccc</li> </ul> </li> </div> </div>

enter image description here

thanks for the help

+7
html css twitter-bootstrap twitter-bootstrap-3
source share
2 answers

To center a block level element using margin: 0 auto; , it should also have a width that is less than its containing block (for auto value to make sense) - since #container covers the width of its parent (the <body> ) there is simply no difference for distribution.

An alternative approach to margin: 0 auto; will install .btn-toolbar in inline-block , and then center it by adding text-align: center; to its containing block. You can apply the same concept to the second example:

http://fiddle.jshell.net/52VtD/94/

+10
source share

In this case, margin:0 auto does not work, because the width of the element is 100% . If you want it to work, you would need to set the width of the element:

 .btn-toolbar { width: 50px; margin: 0px auto; }

If you want to center the text and the button, you can add the text-center class to the parent element, in this case: .row . The style of this class is simply text-align: center .

 <div class="row text-center"> .. </div>

EXAMPLE HERE

As @Adrift points out, it would be much more efficient to center the element by making it inline-block , since you can use text-align:center as opposed to margin:0 auto and avoid setting the element's fixed width.This ensures that the element is centered regardless its width. (example here) - do not forget that you can simply add the text-center class to the parent to center.

It is also worth noting that inline / inline-block elements perceive white space in the markup and, thus, generate space if it is present. If you want to remove this space, see this answer .

+4
source share

More articles:


All Articles