JSFコンポーネントを中央に揃える方法

Question

JSF 2 - Primefaces 3 Webアプリケーションでは、<p:panelGrid>と<p:panel>を使用しています。私はそれらの中に複数のコンポーネントがあり、それらは左寄せされています。私はセンターアラインメントにするためにすべてを必要とします。どうすればいいですかdivを使ってみましたが、動作しません。

Answer 1

生成されたHTML出力を見て、それに応じてCSSを変更してください。その後、

あなたがセンタリングしたいHTML要素がblock element（<div>、<p>、<form>、<table>など、またはdisplay: block;によって強制）である場合、あなたはそれを知ら幅を与えるために、次にあなたがセンタリングすることができます最初の必要性要素自体のCSS margin: 0 auto;を使用して親ブロック要素を基準にしています。

あなたがセンタリングしたいHTML要素がinline element（<span>、<label>、<a>、<img>など、またはdisplay: inline;によって強制）である場合は、その親ブロック要素にCSS text-align: center;を使用して、それを中央にすることができます。あなたはこれを試すことができます中央にpanelGrid：あなたはprimefacesの内容を設定したい場合は

Answer 2

RichFacesを使用していますが、ここで使用したソリューションはPrimefaceにも適用される可能性があります。私たちはcssを使って内部要素のスタイルを設定していました。
ブラウザでページをレンダリングしたら、ソースコードを検索し、レンダリングされるHTML要素を見つけ出す。次に特定のCSSクラスを作成し、パネル全体、またはそのクラスに対するpanelGridの内部要素のスタイルを設定します。

ほとんどの場合、これは最も簡単な解決策でもありました。

Answer 3

CSSで試してみて、p:panelGrid columnClasses属性：

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> 、あなたのスタイルシートでのようなクラスを作成します：

.centered { text-align: center; }

あなただけのテキスト以外のごp:panelGrid列内のコンポーネントを持っている場合は、追加CSSクラスのmargin属性：

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

Answer 4

<h:panelGrid column="1"> 

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

      your contents... 

    </h:panelGroup> 

</h:panelGrid>