predrags predrags - 4 months ago 56
CSS Question

Align p:graphicImage to center inside p:column

I'm developing a test JSF project in PrimeFaces 6.0.
There should be few icons positioned in a table-like structure and centered.
I tried using p:panelGrid with p:row and p:column to create a table-like structure, and p:graphicImage for displaying icons.

The issue is to have p:graphicImage centered inside a cell, i.e. inside a p:column.

Sample of my code is below, and it's not providing the desired result.

<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

After hours of testing, I've come up to a solution.

It appears that in this case the main problem is not how to set alignment in cell (p:column), which can be done in either of the proposed ways (with style="text-align: center;" or with style="margin: 0px auto;").

The main issue here is that p:graphicImage has styleClass="ui-icon ui-icon-...". Without that styleClass (and by using src="..." to specify image source), the cell alignment would be applied without any problems.

If styleClass="ui-icon ui-icon-..." has to be used, then it's needed to specify additional style for p:graphicImage to cope with it, and this style is 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>