Question

我遇到了一些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点？

Answer 1

如果它只是您想要的垂直对齐方式，请使用flex

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

将uib-tab标题内的文本居中，同时仍然可以使整个标签可点击？

1 个答案: