Primeng如何居中对齐p-tabview标题

Question

我使用Primeng p-tabview创建标签。我需要标签标题在中心对齐，如图所示。任何人都可以帮忙怎么做？

<div class="ui-g-12" style="height:100%;">
    <p-tabView class="analysisTab">
        <p-tabPanel header="TRADER">

        </p-tabPanel>
        <p-tabPanel header="EVENTS" [selected]="true">

        </p-tabPanel>
        <p-tabPanel header="SEARCH">

        </p-tabPanel>
        <p-tabPanel header="NOTES">

        </p-tabPanel>
    </p-tabView>
</div>

感谢

Answer 1

ui-tabview-nav列表项由primeng css自动浮动到左侧，因此你必须重置它，而是将它们显示为内联块，并且中心菜单项我们必须添加text-align的属性：中心到容器，你可以像这样添加css（styles.css）：

CSS

.ui-tabview {
    padding: .25em;
    text-align: center;
}

.ui-tabview .ui-tabview-nav li {
    list-style: none;
    float: none;
    position: relative;
    margin: 0 .125em 1px 0;
    padding: 0;
    white-space: nowrap;
    display: inline-block!important;
}

Here a working Plunker