Come allineare i componenti JSF al centro

Question

Nella mia applicazione web JSF 2 - Primefaces 3, sto usando <p:panelGrid> e <p:panel>. Ho diversi componenti al loro interno che sono giustificati a sinistra. Ho bisogno di essere tutti allineati al centro. Come possiamo farlo ho provato a usare div ma non funziona.

Answer 1

Guarda l'output HTML generato e modifica il CSS di conseguenza.

Se l'elemento HTML che desideri centro è un block element (<div>, <p>, <form>, <table>, ecc, o costretti dalla display: block;), allora è necessario prima di dare una larghezza conosciuto e poi si può centrare relativo al suo elemento di blocco padre usando CSS margin: 0 auto; sull'elemento stesso.

Se l'elemento HTML che si desidera centrare è un inline element (<span>, <label>, <a>, <img>, ecc, o costretto da display: inline;), allora è possibile centrare utilizzando i CSS text-align: center; sul suo elemento di blocco genitore.

Answer 2

Utilizziamo RichFaces, ma la soluzione che abbiamo utilizzato in questo caso può essere applicata anche a Primefaces. Abbiamo usato per lo stile degli elementi interni con i CSS.
Dopo aver eseguito il rendering della pagina nel browser, è possibile cercare il codice sorgente e scoprire quali elementi HTML sono resi. Quindi, crea specifiche classi CSS e stili l'intero pannello o gli elementi interni in panelGrid per quella classe.

La maggior parte delle volte questa era la soluzione più semplice e anche sufficiente.

Answer 3

Prova con i CSS e p:panelGrid columnClasses attribuiscono:

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> poi nel foglio di stile creare una classe come:

.centered { text-align: center; }

Se si dispone di componenti del p:panelGrid colonna diversi dal semplice testo, aggiungere l'attributo margin alla tua classe css:

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

Answer 4

Se si desidera impostare il contenuto di un primefaces: panelGrid al centro si può provare questo:

<h:panelGrid column="1"> 

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

      your contents... 

    </h:panelGroup> 

</h:panelGrid>