如何将面板网格对齐到中心?JSF-Primefaces

I know that there are many questions about this issue, but nothing worked for me properly.

我知道关于这个问题有很多问题，但没有什么对我起作用。

I need to align my PanelGrid to center(horizontal).

我需要将面板网格对齐到中心(水平)。

this is my panelgrid

这是我panelgrid

<p:panelGrid styleClass="panelGridCenter">

and my CSS:

和我的CSS:

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

It just aligns the content to center, but not the panelGrid

它只是将内容对齐到中心，而不是panelGrid

3 个解决方案

#1

The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.

JSF 组件呈现HTML

元素，默认情况下是块级元素。要将块级元素本身居中，应该将其水平边距设置为auto，而不是试图将其内联内容居中。

.panelGridCenter {
    margin: 0 auto;
}

#2

The above answer is technically correct but also incomplete.

上述答案在技术上是正确的，但也不完整。

If you want to center something like a div, the above technique of playing with the left and right margin as auto will work, provided that your DIV has limited width. E.g. For you to start being any effect you would have to put something like a width=60%.

如果您想要居中一些东西，比如div，上面的技巧是在auto中使用左右边距，前提是您的div的宽度有限。要使你开始产生任何效果，你就得把宽度等于60%。

And then, once you realize you need to play with fixed widths... you immediately are prompted to the next question: So what exactly should I type in as my fixed width?

然后，一旦你意识到你需要玩固定的宽度…你马上会被提示下一个问题:那么我应该输入什么作为我的固定宽度?

That is why I believe the better answer for this question is: CSS techniques like the one above, are OK for the small details on a web page. But your coarse grained approach for centering anything on a web page should be to make use of a grid system. Most grid systems use 12 cells. If for example your grid system would be by default make 12 cells = 100% width. You could center something by, for example placing your content to be centered in cells [5-8] leaving out as centurion space cells [1-4] and cells [9-12].

这就是为什么我认为这个问题的更好答案是:像上面的CSS技术，对于网页上的小细节是可以的。但是，您粗粒度的以web页面上的任何内容为中心的方法应该是使用网格系统。大多数网格系统使用12个单元。例如，如果你的网格系统默认是12个单元格= 100%宽度。你可以把一些东西居中，例如把你的内容居中于细胞[5-8]中，而不作为百夫长空间细胞[1-4]和细胞[9-12]。

Here is an example based in prime faces grid system:

这里有一个基于素面网格系统的例子:

  <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>

The comments on the above form should make it pretty clear what I meant above. The grid system will normally offer CSS classes to allow your UI to be working across multiple form factors of devices, although ... on this regard I am of the opinion that you can not make a good mobile UI using a desktop UI nor a good desktop UI using a mobile UI. On my opinion you can get a good Tablet/Desktop UI cooked up, but you should write pages from scratch with the minimal an necessary contents for mobile. But that is a different discussion ... just to say, that the flex grid css classes will only take you so far. A lot of potential in theory, much better than hard coding some arbitrary fixed length on your div elements ... but not a silver bullet for all of your problems either.

以上表格上的评论应该能很清楚地说明我上面的意思。网格系统通常会提供CSS类，以允许您的UI跨设备的多种形式因子工作，尽管……在这方面，我的观点是，你不能使用桌面UI来制作一个好的移动UI，也不能使用移动UI来制作一个好的桌面UI。在我看来，你可以制作一个好的平板电脑/桌面UI，但你应该从头开始编写页面，并尽可能少地编写移动设备所需的内容。但这是一个不同的讨论……我只想说，flex grid css类到目前为止只会带你这么远。理论上有很多潜力，比硬编码一些任意固定长度的div元素要好得多……但也不是解决你所有问题的灵丹妙药。

#3

In case if you want right align

如果你想要正确的对齐。

.rightAlign{
     margin-left: auto;
 }

#1