Primefaces：不能居中對齊號碼：圖表

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> 

我還沒有嘗試過的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> 

我甚至試過其他選項，如採用div等，但我無法居中對齊該表中的p：圖表，它始終左對齊。請建議如何居中對齊。

請注意，任何組件和圖表完美呈現都沒有其他問題。

Answer 1

嘗試.center-block使<p:chart>元素的位置中心和.text-center使文本/元素中心內，如果有任何。

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

.text-center {text-align:center}