Primefaces: Nicht in der Lage align p zum Zentrum: Chart

Question

Mein xhtml-Code ist

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

Ich habe auch versucht, ohne die 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> 

Ich habe sogar versucht, andere Optionen wie mit div usw. aber Ich bin nicht in der Lage, das p: Diagramm innerhalb dieser Tabellendaten zu zentrieren, es ist immer linksbündig. Bitte schlagen Sie vor, wie Sie es zentrieren.

Beachten Sie, dass es bei keinem der Komponenten ein anderes Problem gibt und das Diagramm perfekt gerendert wird.

Answer 1

Versuchen Sie .center-block, <p:chart> Elements Position Position und .text-center machen innen Text/Elemente Center wenn überhaupt.

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

.text-center {text-align:center}