對齊語義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還包裹每個菜單項。這樣可以靈活地固定右側和左側邊距，並且還可以在每個菜單項之間添加一些空間（如果需要）。