web-dev-qa-db-ja.com

PanelGridを中央に揃える方法は？ JSF-Primefaces

この問題について多くの質問があることは知っていますが、適切に機能するものはありませんでした。

PanelGridを中央（水平）に揃える必要があります。

これは私のpanelgridです

<p:panelGrid styleClass="panelGridCenter">

および私のCSS：

.panelGridCenter td,.panelGridCenter tr {
    text-align: center;
}

コンテンツを中央に揃えるだけで、panelGridは揃えません

cssjsfprimefacespanel
24
Johnny2012

JSF <p:panelGrid>コンポーネントはHTMLをレンダリングします<table>要素。デフォルトでは ブロックレベル要素 です。ブロックレベル要素自体を中央に配置するには、インラインコンテンツを中央に配置する代わりに、水平マージンをautoに設定する必要があります。

.panelGridCenter {
    margin: 0 auto;
}

こちらもご覧ください：

47
BalusC

上記の答えは技術的には正しいが、不完全でもあります。

Divのようなものを中央に配置したい場合、DIVの幅が制限されている場合、左マージンと右マージンを自動で再生する上記の手法が機能します。例えば。エフェクトを開始するには、width = 60％のようなものを配置する必要があります。

そして、固定幅でプレイする必要があることに気づいたら、すぐに次の質問へのプロンプトが表示されます：固定幅として正確に何を入力する必要がありますか？

そのため、この質問に対するより良い答えは次のとおりです。上記のようなCSSテクニックは、Webページの小さな詳細については問題ありません。ただし、Webページの中心に配置するための粗いアプローチは、グリッドシステムを使用することです。ほとんどのグリッドシステムは12個のセルを使用します。たとえば、グリッドシステムがデフォルトで12セル= 100％幅になる場合。たとえば、コンテンツをセル[5〜8]の中央に配置することで、センチュリオンスペースセル[1〜4]とセル[9〜12]を除外して、何かを中央に配置できます。

プライムフェイスグリッドシステムに基づく例を次に示します。

  <h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
  <form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
    <!-- (a) Start a grid system-->
    <div class="ui-g ui-fluid">

      <!-- (b) Eat the first four cells of the grid -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (c) In the center location of the grid put in the Login form -->
      <div class="ui-g-12 ui-md-4">
        <div class="ui-inputgroup">
          <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
          <input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
        </div>
        <div class="ui-inputgroup">
          <span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
          <input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
        </div>
      </div>

      <!-- (d) Eat the rest of the first row of the grid without setting any contents -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (e) Start the second row and eat the first four cells -->
      <div class="ui-g-12 ui-md-4"></div>

      <!-- (f) Position a form submit button on the fifth cell -->
      <div class="ui-g-12 ui-md-1">
        <button id="loginSubmit" pButton type="submit" label="Submit"></button>
      </div>
    </div>
  </form>

上記のフォームに関するコメントは、私が上記の意味をかなり明確にするはずです。グリッドシステムは通常、デバイスの複数のフォームファクターでUIが動作できるようにするCSSクラスを提供しますが、この点に関しては、デスクトップUIを使用して良いモバイルUIを作成することも、良いUIを作成することもできないと考えていますモバイルUIを使用したデスクトップUI。私の意見では、優れたタブレット/デスクトップUIを作成できますが、モバイルに必要な最小限のコンテンツでページを最初から作成する必要があります。しかし、これは別の議論です...ただ言うと、フレックスグリッドCSSクラスはこれまでのところあなたを連れて行くだけです。理論的には、div要素に任意の固定長をハードコーディングするよりもはるかに優れていますが、すべての問題に対する特効薬ではありません。

1
99Sono

右揃えが必要な場合

.rightAlign{
     margin-left: auto;
 }
0
fjkjava