Primefaces：Pを中央揃えすることができません：グラフ

Question

マイXHTMLコードが

<p:outputPanel id="topperchartcont"> 
     <p:outputPanel rendered="#{performanceStaffController.reportType == 'TP'}"> 
      <table style="width: 100%"> 
      <tr> 
       <td style="width: 10%"> 
       </td> 
       <td style="width: 80%; text-align:center"> 
        <h:panelGrid column="1"> 
         <h:panelGroup style="width:80%; display:block; text-align:center"> 
          <table style="border:1px solid #D8D8D8"> 
          <tr> 
           <td style="text-align:center"> 
            <p:chart type="bar" model="#{performanceStaffController.topperChartModel}" 
               rendered="#{performanceStaffController.topperChartModel != null}" 
               style="#{performanceStaffController.perfBean.chartWidth}"/> 
           </td> 
          </tr> 
          </table> 
         </h:panelGroup> 
        </h:panelGrid> 
       </td> 
       <td style="width: 10%"> 
       </td> 
      </tr> 
      </table> 
     </p:outputPanel> 
    </p:outputPanel> 

である私も、私ものdivなどを使用してのような他のオプションを試してみましたPanelGrid/PanelGroup

なし

<p:outputPanel id="topperchartcont"> 
     <p:outputPanel rendered="#{performanceStaffController.reportType == 'TP'}"> 
      <table style="width: 100%"> 
      <tr> 
       <td style="width: 10%"> 
       </td> 
       <td style="width: 80%; text-align:center"> 
          <table style="border:1px solid #D8D8D8"> 
          <tr> 
           <td style="text-align:center"> 
            <p:chart type="bar" model="#{performanceStaffController.topperChartModel}" 
               rendered="#{performanceStaffController.topperChartModel != null}" 
               style="#{performanceStaffController.perfBean.chartWidth}"/> 
           </td> 
          </tr> 
          </table> 
       </td> 
       <td style="width: 10%"> 
       </td> 
      </tr> 
      </table> 
     </p:outputPanel> 
    </p:outputPanel> 

を試みたが、私はp：chartをそのテーブルのデータの中に整列させることができず、常に左揃えにしています。それを整列させる方法を提案してください。

他のコンポーネントに問題はなく、チャートは完全にレンダリングされます。

Answer 1

<p:chart>要素の位置の中心となるように.center-blockを試してください。.text-centerは、存在する場合はテキスト/要素の中心を中央にします。

.center-block { 
    display:block; 
    margin-right:auto; 
    margin-left:auto; 
} 

.text-center {text-align:center}