Семантическое UI центрированное нежидкостное меню?

Question

У меня есть два меню, один закреплен на дне, а другой - на вершине. Моя проблема в два раза. Я хочу, чтобы они появлялись в центре экрана и были только шириной их содержимого (вместо того, чтобы быть текучим, по умолчанию).

Я ничего не нашел в документации, чтобы указать, что это возможно, поэтому предположительно решение состоит в том, чтобы изменить его с помощью CSS?

Любая помощь была бы принята с благодарностью.

Answer 1

Используйте семантический ui-класс «compact» для вашего меню пользовательского интерфейса, чтобы настроить его содержимое, а затем используйте сетки и столбцы для выравнивания по центру. Так, например:

<div class="ui centered grid"> 
    <div class="center aligned column"> 
     <div class="ui compact menu"> 
      <a class="active item"> 
      <i class="home icon"></i> Home 
      </a> 
      <a class="item"> 
      <i class="mail icon"></i> Messages 
      </a> 
     </div>   
    </div> 
</div> 

JSFiddle Ссылка: http://jsfiddle.net/pLskpufp/2/

Answer 2

Вы также можете просто использовать центральный выровненный контейнер:

<div class="ui center aligned container"> 
    <div class="ui compact menu"> 
     <a class="active item"> 
      <i class="home icon"></i> Home 
     </a> 
     <a class="item"> 
      <i class="mail icon"></i> Messages 
     </a> 
    </div>   
</div> 

JSFiddle Ссылка: http://jsfiddle.net/377v6ect/1/

Answer 3

Я знаю, что это не чистым решением Semantic UI, но для тех из вас, кто ищет способ сделать это с помощью фиксированного меню в Semantic UI, лучшее решение, которое я получил nd до сих пор заключается в том, чтобы обернуть его в div с помощью небольшого пользовательского CSS.

<div className="fixed bottom"> 
    <div className="ui centered grid"> 
    <div className="center aligned column"> 
     <!-- Your Semantic UI menu here, but not fixed. --> 
    </div> 
    </div> 
</div> 

Наряду с этим CSS ...

div.fixed { 
    width: 100%; 
    position: fixed; 
} 
div.fixed.bottom { 
    bottom: 0; 
} 
div.fixed.top { 
    top: 0; 
}