text-alignを使用してテキストを中央に配置できません：center

Question

これは私がブートストラップを使用しているのかどうかわかりませんが、私のヘッダー要素にテキストのセンタリングができません。私は

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <a id="logo" href="#">My Logo Text</a> 
    <nav> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Member Currencies</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

を持っていると私は、このCSS

#logo { 
    text-align: center; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 0px; 
    padding-top: 9px; 
    font-weight: bold; 
} 

#logo:hover { 
    color: #fff; 
    text-decoration: none; 
} 

を追加しましたが、あなたがここに見ることができるように、ロゴのテキストは、中心になっていません - https://jsfiddle.net/vuout1bj/を。それを中心にするために他に何が必要ですか？

Answer 1

あなたがの内部にあるテキストを中心にしていますあなたのa要素しかし、a要素の表示プロパティはinlineです。あなたのテキストは実際にはですが、a要素の内側にあり、a要素の幅は内容によって決まります。したがって、あなたが達成しようとしているものの視覚効果は実際には見えません。ちょうど持っているあなたのa要素を作り、

<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <div style='text-align:center;'> 
     <a id="logo" href="#">My Logo Text</a> 
    </div> 
    <nav> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Member Currencies</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

または：

のどちらかが（sがデフォルトでblockの表示プロパティを持っているdiv」）、およびそのdivに中心性を付与divの内側にあなたのa要素を置きますdisplay:blockプロパティ：

#logo { 
    display:block; 
    text-align: center; 
    margin-right: 10px; 
    font-size: 1.7em; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 0px; 
    padding-top: 9px; 
    font-weight: bold; 
} 

Answer 2

<a ...要素のALIGN-センターに私は役に立たない..例えばdivの幅を100％とテキスト整列センター内ロゴアンカーを配置してみてください。

<div class="container"> 
    <div style="width:100%; text-align:center;"> 
     <a id="logo" href="#">My Logo Text</a> 
    </div> 
    ...