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 m

Answer 1

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:

  
Sign in - FIXME - i18n
  

    
    


      
      


      
      

        

          
          
        
        

          
          
        
      

      
      


      
      


      
      

        
      
    
  

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.