Question

我在PrimeFaces 6.0中开发了一个测试JSF项目。应该有很少的图标位于表格式结构中并居中。我尝试使用p：panelGrid和p：row和p：列来创建一个类似于表的结构，并尝试使用p：graphicImage来显示图标。

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

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

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

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

2 个答案: