在uib-tab标头中居中放置文本，同时仍然使整个标签可点击？

Question

I'm having some CSS trouble. I have a group of bootstrap tabs that each are clickable and open a different part of my page. Problem is, only the text in the tab is clickable and not the entire tab itself.

I am able to solve this by setting the width to 100%, the height to inherit, and the display to block. The problem is, no no matter what I've tried so far, the text in the tab aligns with the top of the area instead of in the center. Here is my HTML:

    <section class="tournament-tabs container">
        <uib-tabset class="tab-nav">
            <uib-tab heading="{{labels.lblOverview}}">
                <div class="tab-overview">
                    <div ng-include="'modules/tournaments/partial/tournaments-view/overview-tab.html'">></div>
                </div>
            </uib-tab>
            <uib-tab heading="{{labels.lblRules}}">
                <div class="tab-rules">
                    <div ng-include="'modules/tournaments/partial/tournaments-view/rules-tab.html'"></div>
                </div>
            </uib-tab>
            <uib-tab heading="{{labels.lblPlayers}}" disable="isBracketdisabled">
                <div class="tab-players">
                    <div ng-include="'modules/tournaments/partial/tournaments-view/players-tab.html'">></div>
                </div>
            </uib-tab>
            <uib-tab heading="{{labels.lblBrackets}}" disable="isBracketdisabled">
                <bracket bracketdata="bracketData" options="bracketOpts" ></bracket>
                <div ng-if="loadingmatch" class="page-loading">
                    <i class='fa fa-circle-o-notch fa-5x fa-spin'></i>
                </div>
            </uib-tab>
        </uib-tabset>

    </section>

And here's the CSS I use for the tabs (using .LESS):

  .tab-nav .nav-tabs{
    margin: 30px 0;
    text-transform: uppercase;
    text-align: center;

    li a {
      font-size: 14px;
      width: 100%;
      display:block;
      height:100%;
    }
  }

Is there something simple I'm just not seeing because it's Friday at 11?

Answer 1

If it's just vertical alignment you want, use flex

 .tab-nav .nav-tabs{
   display: flex;
   align-items: center;
   justify-content: center;
 }