如何将 PanelGrid 对齐到中心？ JSF-Primefaces答案

【问题标题】：How to align PanelGrid to center? JSF-Primefaces如何将 PanelGrid 对齐到中心？ JSF-Primefaces
【发布时间】：2013-03-17 10:42:44
【问题描述】：

我知道有很多关于这个问题的问题，但没有一个适合我。

我需要将 PanelGrid 对齐到中心（水平）。

这是我的面板网格

<p:panelGrid styleClass="panelGridCenter">

和我的 CSS：

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

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

【问题讨论】：

标签： css jsf primefaces panel

【解决方案1】：

如果你想右对齐

.rightAlign{
     margin-left: auto;
 }

【讨论】：

你在哪里添加.rightAlign？在<h:body>?

【解决方案2】：

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

如果您想将诸如 div 之类的东西居中，只要您的 DIV 具有有限的宽度，上述将左右边距作为自动播放的技术将起作用。例如。为了让你开始成为任何效果，你必须设置像 width=60% 这样的东西。

然后，一旦你意识到你需要使用固定宽度......你会立即被提示到下一个问题：那么我到底应该输入什么作为我的固定宽度呢？

这就是为什么我认为这个问题的更好答案是：像上面这样的 CSS 技术对于网页上的小细节来说是可以的。但是，您在网页上将任何内容居中的粗粒度方法应该是使用网格系统。大多数网格系统使用 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>

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

【讨论】：

所以p:panelGrid layout="grid" 是您的建议（PF 6.1 文档的第 365 页）。除此之外，如果“对应”jsf 组件的优势太有限，我会尝试使用纯 html。
您好，当您使用素面 (jsf) 时，我倾向于使用他们的网格系统，而不是面板网格。一般来说，使用表格并不是任何地方的最佳实践。 primefaces.org/showcase/ui/panel/grid.xhtml 在面板元素下查看他们的网格 CSS。无论你使用 JSF 的 Angular 都是一样的……它是纯 CSS 的，你不需要为此使用花哨的组件。
阅读文档...（并检查生成的展示面板网格的 html 源代码）。使用 layout="grid" 它使用网格系统（用于响应性）。并且不使用 anywhere 表是完全错误的......如果某物 is 是一个表（或网格，如数据表或面板网格），那并没有错。只是不要将它用于页面布局。
好的，你可以使用panelGrid组件和布局网格。至于表格，我很抱歉，但在现实生活中使用表格的用例很少。虽然基于 DIV 的表格可以逐步呈现并响应较小的外形尺寸，但具有多行的完整表格元素呈现为 Big Bang - 您经常会发现人们抱怨大表格呈现速度慢。您需要存在表格的所有数据，并且浏览器一次性呈现。一般来说，你最好不使用表格。样式表可能存在问题，但很难。
是的，我并不完全不同意你（也不完全同意）但事情不应该是教条主义的......你可以覆盖table，tr和@的css 987654326@（imo 很容易）所以你甚至可以让现有的组件“响应”......我做到了最困难的是你需要为盲人和聋人添加的所有新“属性”。并不是说这样做不好，但它有点重复了很多努力。干杯

【解决方案3】：

JSF <p:panelGrid> 组件呈现 HTML <table> 元素，默认情况下是 block level element。要将块级元素本身居中，您应该将其水平边距设置为auto，而不是尝试将其内联内容居中。

.panelGridCenter {
    margin: 0 auto;
}

另见：

Center a div in CSS

【讨论】：