将 p:graphicImage 对齐到 p:column 内的中心

Question

我正在 PrimeFaces 6.0 中开发一个测试 JSF 项目。 应该有几个图标位于类似表格的结构中并居中。 我尝试将 p:panelGrid 与 p:row 和 p:column 一起使用来创建类似表格的结构，并使用 p:graphicImage 来显示图标。

问题是让 p:graphicImage 在单元格内居中，即在 p:column 内。

我的代码示例如下，它没有提供所需的结果。

<p:panelGrid id="pgIcons" style="width: 100%;">
    <p:row>
        <p:column style="width: 34%; text-align: center;">
            <p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check"/>
        </p:column>
        <p:column style="width: 33%; text-align: center;">
            <p:graphicImage id="gi2" styleClass="ui-icon ui-icon-bookmark"/>
        </p:column>
        <p:column style="width: 33%; text-align: center;">
            <p:graphicImage id="gi3" styleClass="ui-icon ui-icon-tag"/>
        </p:column>
    </p:row>
</p:panelGrid>

Answer 1

经过数小时的测试，我想出了一个解决方案。

看来，在这种情况下，主要问题不是如何在单元格中设置对齐方式（p:column），这可以通过任何一种建议的方式来完成（使用 style= "text-align: center;" 或 style="margin: 0px auto;")。

这里的主要问题是 p:graphicImage 有 styleClass="ui-icon ui-icon-..."。如果没有那个 styleClass（并且通过使用 src="..." 来指定图像源），单元格对齐将毫无问题地应用。

如果必须使用 styleClass="ui-icon ui-icon-..."，那么需要为 p:graphicImage 指定额外的样式来应对有了它，这个样式是 style="display: block; margin: 0px auto;".

<p:panelGrid id="pgIcons" style="width: 100%;">
    <p:row>
        <p:column style="width: 50%; text-align: center;">
            <p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check" 
                style="display: block; margin: 0px auto;"/>
        </p:column>
        <p:column style="width: 50%; margin: 0px auto;">
            <p:graphicImage id="gi2" styleClass="ui-icon ui-icon-bookmark"
                style="display: block; margin: 0px auto;"/>
        </p:column>
    </p:row>
</p:panelGrid>

Answer 2

<p:column styleClass="centered">
    <p:graphicImage id="gi1" styleClass="ui-icon ui-icon-check"/>
</p:column>

CSS

.centered td {
    margin: 0px auto;
}