Выравнивать центр текстового меню смыслового интерфейса

Question

Я новичок в семантическом интерфейсе, и я стараюсь иметь некоторые элементы текстового меню, расположенные поверх моей страницы, которые всегда выравниваются по центру страницы. 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. Это дает гибкость при фиксации правого и левого полей, а также добавляет некоторое пространство, если необходимо, между каждым пунктом меню.