How to align JSF components to center

Question

In my JSF 2 - Primefaces 3 web application, I am using <p:panelGrid> and <p:panel>. I have multiple components inside them which are left justified. I need to all to be center align. How can we do this I tried to use div but it does not work.

Solution 1

Look at the generated HTML output and alter CSS accordingly.

If the HTML element which you'd like to center is a block element (<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto; on the element itself.

If the HTML element which you'd like to center is an inline element (<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center; on its parent block element.

Solution 2

If you want to set the content of a primefaces:panelGrid to center you can try this:

<h:panelGrid column="1">

   <h:panelGroup style="display:block; text-align:center">

           your contents...

   </h:panelGroup>

</h:panelGrid>

Solution 3

We are using RichFaces, but the solution that we used in this case may apply to Primefaces as well. We used to style the inner elements with css.
Once you render the page in the browser, you can look up the source code and find out what HTML elements are rendered. Then create specific CSS classes and style the whole panel or the inner elements in panelGrid to that class.

Most of the time, this was the easiest solution and also sufficient.

Solution 4

Try with css and p:panelGrid columnClasses attribute:

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> then in your stylesheet create a class like:

.centered { text-align: center; }

If you have components in your p:panelGrid column other than just text, add the margin attribute to your css class:

.centered { text-align: center; margin-left: 50%; }

View more solutions