将p：graphicImage对齐到p：column的中心

Question

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

问题是让p：graphicImage居中位于单元格内，即位于ap：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汽车;” 。

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