语义 UI 居中非流畅菜单？

Question

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

我在文档中没有发现任何表明这是可能的，所以大概的解决方案是用 CSS?

修改它

如有任何帮助，我们将不胜感激。

Answer 1

使用语义 ui class "compact" 为您的 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 Link: 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 Link: http://jsfiddle.net/377v6ect/1/

Answer 3

我知道这不是一个纯粹的语义 UI 解决方案，但是对于那些正在寻找一种方法来使用语义 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;
}

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>

语义 UI 居中非流畅菜单？

Semantic UI centered non-fluid menu?

html

css

semantic-ui