Primefaces：无法居中对齐 p：chart答案

【问题标题】：Primefaces: Not able to center align p:chartPrimefaces：无法居中对齐 p：chart
【发布时间】：2016-05-25 19:29:12
【问题描述】：

我的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:chart，它总是左对齐。请建议如何居中对齐。

请注意，任何组件都没有其他问题，并且图表呈现完美。

【问题讨论】：

标签： css primefaces

【解决方案1】：

尝试.center-block 使<p:chart> 元素的位置中心和.text-center 使内部文本/元素中心（如果有）。

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

.text-center {text-align:center}

【讨论】：

.center-block css 与上面没有 PanelGrid/PanelGroup 的代码完美配合。非常感谢。