Semantic UI centered non-fluid menu?

Question

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).

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

Any help would be greatly appreciated.

Answer 1

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 Link: http://jsfiddle.net/pLskpufp/2/

Answer 2

You can also just use a center aligned container:

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