Блог

У меня возникли некоторые проблемы с CSS. У меня есть группа вкладок начальной загрузки, каждая из которых доступна для просмотра и открывает другую часть моей страницы. Проблема в том, что кликабельным является только текст на вкладке, а не сама вкладка целиком.

Я могу решить эту проблему, установив ширину на 100%, высоту для наследования и блокировку отображения. Проблема в том, что независимо от того, что я пробовал до сих пор, текст на вкладке выравнивается по верхней части области, а не по центру. Вот мой 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>
  

И вот CSS, который я использую для вкладок (используя .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%;
    }
  }
  

Есть ли что-то простое, чего я просто не вижу, потому что сегодня пятница в 11?

Если вы хотите просто выравнивание по вертикали, используйте flex

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