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：chart对齐在该table-data中，它始终保持对齐状态。请建议如何对齐它。

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

Answer 1

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

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

.text-center {text-align:center}

Primefaces：无法居中对齐p：chart

1 个答案: