css - CSS を使用してアイテムのグループを中央揃えにする

Question

列のフッターにアイコンのグループがあるアプリに取り組んでいます。現在、アイコンは左詰めになっています。しかし、私はそれらを中心にしたいと思います。実演するために、ここにあるフィドルがあります。HTML は次のようになります。

<div class="ui full-height grid">
  <div class="full-height row">
    <div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
      <div id="nav-tab-items" class="row">
        <div class="nav-tab-frame column">
          <div class="ui active tab nav-tab-content" data-tab="home">
              First Tab
          </div>
          <div class="ui tab nav-tab-content" data-tab="info">
            Second Tab
          </div>
          <div class="ui tab nav-tab-content" data-tab="third">
            Third Tab
          </div>
        </div>
      </div>

      <div id="nav-tab-control" class="bottom aligned row">
        <div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;">
          <a class="active red item" data-tab="home">tab 1</a>
          <a class="blue item" data-tab="info">tab 2</a>
          <a class="green item" data-tab="third">tab 3</a>
        </div>
      </div>    
    </div>

    <div class="eight wide full-height column">
      [Content Goes Here]
    </div>
  </div>
</div>

には 2 つの問題がありますnav-tab-control。まず、nav-tab-controlスタイルに「bottom:0」を設定するとすぐに、行がページの幅全体を占めます。フィドルでそのエラーを再現できません。しかし、何がそれを引き起こすのかさえわかりません。2番目に、これは最初の問題に関連していると思います..の幅内でアイコンを中央に配置する方法がわかりませんnavDiv.

誰かが提供できる洞察に心から感謝します。