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.Come allineare i componenti JSF al centro
risposta
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.
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.
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%; }
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>
- 1. Allineare un pulsante al centro
- 2. Come allineare il centro dei componenti in JPanel usando GridBagLayout?
- 3. Allineare il paragrafo al centro della pagina
- 4. Come allineare al centro questo testo accanto a un pulsante?
- 5. come ottenere div contenitore principale di allineare al centro
- 6. come allineare un'immagine al centro di una pagina in ionico
- 7. Come allineare una sottoview al centro di una NSide genitore
- 8. Come allineare il pulsante di azione mobile al centro
- 9. Come allineare verticalmente (al centro) il contenuto di UITableView?
- 10. come allineare il testo verticalmente al centro in Android
- 11. Come allineare 3 UIButtons al centro di un UITableCellView?
- 12. Android - Come allineare un centro di immagine rispetto al TextView
- 13. Come allineare il testo al centro in etichetta asp
- 14. PyQt5: Centro allineare un'etichetta
- 15. Centro al centro dello schermo
- 16. Come allineare al centro un elemento flessibile e allineare a destra un altro usando Flexbox
- 17. necessario allineare gli elementi di elenco al centro di div
- 18. Android allineare il testo in alto al centro
- 19. set modalità testo allineare al centro in filatore in Android
- 20. Come allineare gli elementi td nel centro
- 21. Mantenere le dimensioni preferite dei componenti al centro di BorderLayout
- 22. Forza allineare un contenuto nel centro
- 23. allineare il centro di testo con Android
- 24. Testo allineato al centro/centrale con PIL?
- 25. JSF 1.2: Posso creare componenti riutilizzabili all'interno della vista JSF
- 26. Posizionamento orizzontale dei componenti in JSF
- 27. Genera documentazione per componenti compositi JSF 2
- 28. JavaFX: mantenere tutti i componenti al centro anche durante il ridimensionamento di una finestra
- 29. UILabel Allinea il testo al centro
- 30. Come allineare l'immagine al centro della cella della tabella (Tabella SWT)
questo ha lavorato per me come un fascino, grazie Amir. –