web-dev-qa-db-ja.com

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

私のJSF 2-Primefaces 3 Webアプリケーションでは、<p:panelGrid>および<p:panel>。内部に複数のコンポーネントがあり、左揃えされています。中央揃えにする必要があります。どうすればこれを実行できますか？divを使用しようとしましたが、機能しません。

cssjsfjsf-2primefacesalignment
7
Abhishek Dhote

生成されたHTML出力を見て、それに応じてCSSを変更します。

中央に配置するHTML要素が block element （<div>、<p>、<form>、<table>など、またはdisplay: block;）、次に、最初に既知の幅を指定する必要があります。次に、CSS margin: 0 auto;要素自体に。

中央に配置するHTML要素が インライン要素 （<span>、<label>、<a>、<img>など、またはdisplay: inline;）、CSSを使用して中央に配置できますtext-align: center;その親ブロック要素上。

30
BalusC

Primefaces：panelGridのコンテンツを中央に設定する場合は、次のように試すことができます。

<h:panelGrid column="1">

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

           your contents...

   </h:panelGroup>

</h:panelGrid>
14
Ebrahim Amini Sharifi

私たちはRichFacesを使用していますが、この場合に使用したソリューションはPrimefacesにも適用される場合があります。以前は、cssを使用して内部要素をスタイルしていました。
ブラウザでページをレンダリングしたら、次のことができますソースコードを検索し、レンダリングされるHTML要素を確認します。次にcreate specific CSSクラスを作成し、パネル全体またはpanelGridの内部要素をそのクラスにスタイルします。

ほとんどの場合、これは最も簡単なソリューションであり、十分なものでした。

4
premma

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%; }

2
Akos K