セマンティックUIのテキストメニューセンターを整列する

Question

セマンティックUIを初めて使用しています。ページの中央に常に配置された、反応しやすいテキストメニュー項目をページの中央に配置しようとしています。 Here's the sample of my code。

<div class="ui text menu"> 
    <a class="blue item" href="#">Home</a> 
    <a class="blue item" href="#">About</a> 
    <a class="blue item active" href="#">Contact</a> 
</div> 

私は、グリッドベースのレイアウトやネット上で提案されている他の多くのアプローチを使用しようとしましたが、それらのすべては、テキストメニューに動作しないコンパクトなメニューに関連しています。

次のコードスニペットを使用して終了

Answer 1

：

<div class="ui relaxed grid"> 
    <div class="five wide column"></div> 
    <div class="six wide column"> 
     <div class="ui grid text menu"> 
      <div class="five wide column"> 
       <a class="yellow item" href="#">Home</a> 
      </div> 
      <div class="five wide column"> 
       <a class="yellow item" href="#">About</a> 
      </div> 
      <div class="five wide column"> 
       <a class="yellow item active" href="#">Contact</a> 
      </div> 
     </div> 
    </div> 
    <div class="five wide column"></div> 
</div> 

jsFiddle link

は基本的に、私は私のメニュー上にグリッドラッパーを作成してもdivに各メニュー項目を包みます。これにより、左右のマージンを固定したり、必要に応じて各メニュー項目間にスペースを追加したりすることができます。