Align Semantic UI Text Menü Center

Question

Ich bin neu in Semantic UI, und ich versuche, einige reaktionsfähige Text Menüelemente auf meiner Seite, die immer auf die Mitte der Seite ausgerichtet sind. 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> 

Ich habe versucht, Grid basiertes Layout und viele anderen Ansätze zu verwenden, die auf dem Netz vorgeschlagen werden, aber alle von ihnen sind zu kompakten Menüs verwendet, die auf Textmenüs funktionieren nicht.

Answer 1

folgende Code-Schnipsel am Ende mit:

<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

Grundsätzlich ist ein Raster Wrapper über mein Menü erstellt und auch jeden Menüpunkt in einem div wickeln. Das gibt Flexibilität bei der Festlegung der rechten und linken Ränder und fügt bei Bedarf zwischen den einzelnen Menüpunkten auch etwas Platz hinzu.