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の左に浮いていますアイテム我々は、テキスト整列の属性を追加する必要があります。

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

：コンテナへのセンターは、あなたがそう（Styles.cssを）のようにCSSを追加することができます210

Here a working Plunker