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

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

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

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

Ответы

Ответ 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/

Ответ 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/

Ответ 3

Я знаю, что это не чистый Semantic UI-решение, но для тех из вас, кто ищет способ сделать это с помощью фиксированного меню в Semantic UI, лучшее решение, которое я нашел до сих пор, - это обернуть его в 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;
}