Warum funktioniert Center Align nicht über CSS?

Question

Ich habe den folgenden Code,

<ul class="list-group"> 
     <li style="background: #F3F3F3;" class="list-group-item"> 
     <a href="#carousel-example-generic" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <span class="center-class">Branch Details</span> 
     </li> 
</ul> 

Ich möchte die Zweig Details Text in der Mitte erscheinen. Meine CSS-Klasse wie das ist,

<style type="text/css"> 
    .center-class { 
    text-align: center; 
    } 
</style> 

Hier ist der Code, den ich gerade arbeite - http://jsbin.com/vunicayiho/edit?html,output Bin ich etwas falsch?

Answer 1

Wie gesagt, die Spanne inline ist und nicht verlängert nicht auf volle Breite, und diese bewirken, dass der Text zentriert nicht zu werden scheint. Sie könnten Bootstrap benutzerdefinierte Klasse verwenden, um dies zu lösen:

In der <li> Add Klasse clearfix den li zum Inhalt sie besitzt, zu erweitern und dann die Bootstrap-Klasse col-xs-1 und col-xs-11 die Elemente innerhalb zu beheben.

<li class="list-group-item clearfix" style="background: #F3F3F3;"> 
      <a data-slide="prev" role="button" href="#carousel-example-generic" class="col-xs-1"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <span class="center-class col-xs-11">Branch Details</span> 
</li> 

Dann mußte man nur die richtige Höhe einstellen, das heißt:

.center-class { 
    text-align: center; 
    line-height:20px; 
    } 

Und es funktioniert gut!

Answer 2

Es ist, weil <span> ein Inline-Element ist. Also geben Sie die Klasse an die <li>, überprüfen Sie auch Ihre Markup. Das ist durcheinander. ein Korrigiert:

<ul class="list-group"> 
    <li style="background: #F3F3F3;" class="list-group-item text-center"> 
    <a href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span>Branch Details</span> 
    </a> 
    </li> 
</ul> 

Ausgang: http://jsbin.com/barunefeku/1/edit?html,output