Bootstrap .center-block funktioniert nicht wie erwartet

Question

JSFIddle. Ich möchte das Zentrum mit Bootstrap ausrichten. Alle will ich zwei Dinge

1) Machen Sie das ul Zentrum

2) Als ul ‚s richten sollte widthNICHT so wie 20% oder so etwas. Ich möchte, dass es width: auto; ist, weil die Nummer li s dynamisch ist.

Ich versuchte folgenden Code

 <div class="col-xs-12 col-md-8"> 

     <div class="center-block"> 
      <ul class="nav nav-pills"> 
       <li class="active"><a class="link-text-bright-blue" href="#2015-14" data-toggle="tab" aria-expanded="false"><h5>2015 &amp; 2014</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2013" data-toggle="tab" aria-expanded="false"><h5>2013</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2012" data-toggle="tab" aria-expanded="false"><h5>2012</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2011" data-toggle="tab" aria-expanded="false"><h5>2011</h5></a></li> 
       <li class=""><a class="link-text-bright-blue" href="#2006-2010" data-toggle="tab" aria-expanded="false"><h5>2006 - 2010</h5></a></li> 
      </ul> 
     </div> 

     <div> 
      ... Other div 
     </div> 

    </div> 

Answer 1

is it not what justified nav does?

auch daran erinnern, dass, wenn .center-block verwenden Sie float:none; hinzufügen müssen, wie es in Bootstrap fehlt

Machen Sie das ul Zentrum

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

http://jsfiddle.net/DTcHh/3384/

Hinweis ausrichten: Sie wurden

Answer 2

versuchen, dieses: http://jsfiddle.net/DTcHh/3371/

body { 
    margin: 10px; 
} 
.navbar { 
    border: 1px solid transparent; 

    margin-bottom: 20px; 
    min-height: 50px; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
.navbar-nav { 
    display: inline-block; 
    float: none !important; 
    margin: 0; 
} 
.navbar-right { 
    display: inline-block; 
    float: none !important; 
} 
.navbar-collapse.collapse { 
    display: inline-block !important; 
    float: none !important; 
    height: auto !important; 
    margin: 0 auto !important; 
    overflow: hidden; 
    padding: 0; 
    text-align: center; 
} 
.container { 
    max-width: 100%; 
} 
.navbar-header { 
    display: inline-block; 
    float: left !important; 
} 

Answer 3

Die .center-block funktioniert nur ein div in Ihrem jsfiddle für die Zeile Klasse fehlt innerhalb eines div oder Tag mit einem definierte Breite.

Andernfalls müssen Sie float: none; zu der css .center-block{} hinzufügen.

Es ist posibble auch mit align oder text-align=center;, aber weiß, dass Mitte-Block erstellt wurde, dies nicht zu tun.

Beachten Sie, dass die bootstrap css bereits innerhalb der Klasse umfasst .center-block folgenden:

// Class 
.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

// Usage as a mixin 
.element { 
    .center-block(); 
}