センターアラインメントがCSSで機能しないのはなぜですか？

Question

私は支店詳細テキストが中央に表示したい、次のコード、

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

を持っています。私のCSSクラスは、このようなものです、

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

ここで私が働いているコードだ - http://jsbin.com/vunicayiho/edit?html,output は私が何か間違ったことをやっていますか？

Answer 1

としては、スパンがインラインで、全幅に延びており、この原因テキストがセンタリングされていないようではありません、と述べました。内部要素を修正することが所有しているコンテンツに対するLiを展開し、ブートストラップクラスcol-xs-1とcol-xs-11する<li>追加クラスclearfixで

：あなたはこの問題を解決するために、ブートストラップカスタムクラスを使用することができます。

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

は、その後、あなたは唯一の正しいheigth、すなわち設定する必要がありました：

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

を、それが正常に動作します！

Answer 2

<span>がインライン要素であるためです。クラスを<li>に指定し、マークアップも確認してください。それはめちゃくちゃです。 1を訂正：

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

出力：http://jsbin.com/barunefeku/1/edit?html,output