How to align PanelGrid to center? JSF-Primefaces

Question

I know that there are many questions about this issue, but nothing worked for me properly.

I need to align my PanelGrid to center(horizontal).

this is my panelgrid

<p:panelGrid styleClass="panelGridCenter">

and my CSS:

.panelGridCenter td,.panelGridCenter tr {
    text-align: center;
}

It just aligns the content to center, but not the panelGrid

Answer 1

The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.

.panelGridCenter {
    margin: 0 auto;
}

See also:

• Center a div in CSS

Answer 2

The above answer is technically correct but also incomplete.

If you want to center something like a div, the above technique of playing with the left and right margin as auto will work, provided that your DIV has limited width. E.g. For you to start being any effect you would have to put something like a width=60%.

And then, once you realize you need to play with fixed widths... you immediately are prompted to the next question: So what exactly should I type in as my fixed width?

That is why I believe the better answer for this question is: CSS techniques like the one above, are OK for the small details on a web page. But your coarse grained approach for centering anything on a web page should be to make use of a grid system. Most grid systems use 12 cells. If for example your grid system would be by default make 12 cells = 100% width. You could center something by, for example placing your content to be centered in cells [5-8] leaving out as centurion space cells [1-4] and cells [9-12].

Here is an example based in prime faces grid system:

  <h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
  <form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
    <!-- (a) Start a grid system-->
    <div class="ui-g ui-fluid">

      <!-- (b) Eat the first four cells of the grid -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (c) In the center location of the grid put in the Login form -->
      <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
          <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
          <input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
        </div>
        <div class="ui-inputgroup">
          <span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
          <input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
        </div>
      </div>

      <!-- (d) Eat the rest of the first row of the grid without setting any contents -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (e) Start the second row and eat the first four cells -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (f) Position a form submit button on the fifth cell -->
      <div class="ui-g-12 ui-md-1">
        <button id="loginSubmit" pButton type="submit" label="Submit"></button>
      </div>
    </div>
  </form>

The comments on the above form should make it pretty clear what I meant above. The grid system will normally offer CSS classes to allow your UI to be working across multiple form factors of devices, although ... on this regard I am of the opinion that you can not make a good mobile UI using a desktop UI nor a good desktop UI using a mobile UI. On my opinion you can get a good Tablet/Desktop UI cooked up, but you should write pages from scratch with the minimal an necessary contents for mobile. But that is a different discussion ... just to say, that the flex grid css classes will only take you so far. A lot of potential in theory, much better than hard coding some arbitrary fixed length on your div elements ... but not a silver bullet for all of your problems either.

Answer 3

In case if you want right align

.rightAlign{
     margin-left: auto;
 }