24

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

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

これは私のパネルグリッドです

<p:panelGrid styleClass="panelGridCenter">

と私のCSS：

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

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

4

3 に答える 3

53

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

.panelGridCenter {
    margin: 0 auto;
}

参照：

于 2013-03-27T11:19:14.020 に答える
1

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

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要素に任意の固定長をハードコーディングするよりもはるかに優れています...しかし、すべての問題に対する特効薬ではありません。

于 2017-09-17T14:05:24.450 に答える
0

右揃えにしたい場合

.rightAlign{
     margin-left: auto;
 }
于 2018-04-10T22:17:34.783 に答える