Primeng comment centrer aligner les en-têtes p-tabview

Question

J'utilise Primeng p-tabview pour créer des onglets. J'ai besoin que les en-têtes des onglets soient alignés au centre comme indiqué sur l'image. Quelqu'un peut-il aider à faire cela?

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

Merci

Answer 1

éléments de liste ui-TabView-nav sont flottaient automatiquement vers la gauche par le css primeng donc vous devez réinitialiser que et de les afficher à la place comme inline-block, et au menu centrez éléments que nous devons ajouter l'attribut text-align: center au conteneur, vous pouvez ajouter le css comme si (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