语义UI居中的非流体菜单？ [英] Semantic UI centered non-fluid menu?

问题描述

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

I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).

我没有找到任何内容文档来表明这是可能的，所以大概解决方案是用CSS修改它？

I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?

任何帮助将非常感激。

推荐答案

使用语义ui类compact为您的UI菜单调整内容，然后使用网格和列进行中心对齐。
例如：

Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment. So for example:

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

JSFiddle Link: http://jsfiddle.net/pLskpufp/2/

这篇关于语义UI居中的非流体菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！