So richten Sie JSF-Komponenten an der Mitte aus

Question

In meiner Webanwendung JSF 2 - Primefaces 3 verwende ich <p:panelGrid> und <p:panel>. Ich habe mehrere Komponenten in ihnen, die linksbündig sind. Ich muss alle mittig ausrichten. Wie können wir das tun Ich habe versucht, div zu verwenden, aber es funktioniert nicht.

Answer 1

Sehen Sie sich die generierte HTML-Ausgabe an und ändern Sie CSS entsprechend.

Wenn das HTML-Element, das Sie Zentrum mögen ein block element (<div>, <p>, <form>, <table>, etc, oder gezwungen durch display: block;), dann müssen Sie zuerst, um ihn eine bekannte Breite und dann können Sie Zentrieren es relativ zu seinem übergeordneten Blockelement mit CSS margin: 0 auto; auf dem Element selbst.

Wenn das HTML-Element, das Sie zentrieren möchten ein inline element (<span>, <label>, <a>, <img>, etc, oder gezwungen durch display: inline;), dann können Sie es zentrieren CSS text-align: center; auf seinem übergeordneten Blockelement.

Answer 2

Wir verwenden RichFaces, aber die Lösung, die wir in diesem Fall verwendet haben, kann auch auf Primefaces angewendet werden. Wir haben die inneren Elemente mit css gestaltet.
Sobald Sie die Seite im Browser rendern, können Sie den Quellcode nachschlagen und herausfinden, welche HTML-Elemente gerendert werden. Dann erstellen Sie spezifische CSS Klassen und style das gesamte Panel oder die inneren Elemente in panelGrid zu dieser Klasse.

Die meiste Zeit war dies die einfachste Lösung und auch ausreichend.

Answer 3

Versuchen mit CSS und p:panelGrid columnClasses Attribut:

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> dann in Ihrem Stylesheet eine Klasse erstellen, wie:

.centered { text-align: center; }

Wenn Sie Komponenten in Ihrem p:panelGrid Spalte andere als nur Text, fügen das margin-Attribut für Ihre css-Klasse:

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

Answer 4

Wenn Sie den Inhalt eines primefaces festlegen möchten: panelGrid Sie zentrieren kann dies versuchen:

<h:panelGrid column="1"> 

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

      your contents... 

    </h:panelGroup> 

</h:panelGrid>