Semantic UI居中且非流体的菜单？

Question

我有两个菜单，一个固定在底部，另一个固定在顶部。我的问题有两个方面。一是我希望它们出现在屏幕的中央，并且只占据其内容的宽度（而不是像默认情况下一样流动）。

我在文档中没有找到任何表明这是可能的，因此解决方案可能就是使用CSS进行修改？

非常感谢任何帮助。

- Nathan McCallum

Answer 1

使用语义化UI类"紧凑"来调整您的UI菜单以适应内容，然后使用网格和列进行居中对齐。例如：

<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/

- MTran

---

当您将菜单设置为“fixed”时，这似乎也会失败。 - rubie

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 Link: http://jsfiddle.net/377v6ect/1/

- Bonnici

---

当在菜单上使用fixed类时，似乎会出现故障。 - rubie

Answer 3

我知道这不是纯粹的Semantic UI解决方案，但对于那些想要在Semantic UI中使用固定菜单的人来说，迄今为止我找到的最好的解决方案是将其包装在带有一些自定义CSS的div中。

<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;
}

- ihake

Answer 4

我在语义论坛和其他地方进行了搜索；创建了我的... 希望对你也有用。

   <div class="ui center aligned container">
    <div class="ui" style="background-color: #009999;">
      <!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
        <div class="ui centered small image" >
            <a href="#">
            <img class="logo" src="./logo_white.png">
            </a>
        </div>
    <!-- </a> -->
    </div>
</div>

- Musa Toktaş