UIkit uk-navbar-center不居中

Question

I am using a very simple UIKIT navbar layout.

The default is for the navigation items to be left align.

I am trying to center the navbar items by using uk-navbar-center whic yields this result

As you can see the items are not totaly centered.

Here is my code:

<nav class="uk-navbar">
  <ul class="uk-navbar-nav uk-navbar-center uk-hidden-small">
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 11</a></li>
    <li><a href="">Option 2</a></li>
    <li><a href="">Option 3</a></li>
  </ul>
</nav>

<hr class="uk-grid-divider">
<div class="uk-container uk-container-center uk-text-center">
  <a class="uk-button" href="">Link</a>
  <button class="uk-button uk-button-primary uk-button-mini" type="button">Button</button>
  <button class="uk-button" type="button" disabled>Button</button>
</div>

Any ideas why this is not centered?

Many thanks!

Answer 1

I found the solution. You need to use the flex component. If you add the following two classes uk-flex & uk-flex-center this will center the menu items.