Primeng, wie die p-Tabview-Header zentriert werden

Question

Ich verwende Primeng p-tabview zum Erstellen von Registerkarten. Ich brauche die Tab-Header in der Mitte ausgerichtet werden, wie im Bild gezeigt. Kann mir jemand helfen, wie das geht?

<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> 

Dank

Answer 1

ui-TabView-nav Listenelemente wird an den von der primeng css links automatisch schwebt, so dass Sie, dass zurückgesetzt haben und sie stattdessen als Inline-Block anzuzeigen und Menü zum Zentrum Artikel müssen wir das Attribut text-align hinzufügen: center zum Container, können Sie die CSS wie so (styles.css) hinzufügen:

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