如何将PanelGrid居中对齐？JSF-Primefaces

Question

如何将PanelGrid居中对齐？JSF-Primefaces

24

我知道这个问题有很多相关的提问，但对我来说没有一种方法是有效的。

我需要把我的PanelGrid水平居中对齐。

这是我的panelgrid

<p:panelGrid styleClass="panelGridCenter">

我的 CSS 代码：

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

它只是将内容居中对齐，但不包括panelGrid

- Johnny2012

3个回答

1

如果您想右对齐：

.rightAlign{
     margin-left: auto;
 }

- fjkjava

你在哪里添加.rightAlign？在<h:body>上吗？ - Kukeltje

1

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

如果您想居中像DIV这样的东西，上述技巧通过将左右边距设置为auto来进行调整，只要您的DIV的宽度有限制就可以工作。例如，对于您开始任何效果，您需要放置类似于width=60％的内容。

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

这就是为什么我认为对于这个问题更好的答案是：像上面那样的CSS技术，适用于网页上的小细节。但您在网页上让任何东西居中的粗略方法应该是利用网格系统。大多数网格系统使用12个单元格。例如，如果默认情况下您的网格系统将12个单元格= 100％宽度。您可以通过将要居中的内容放置在单元格[5-8]中将缝隙空间单元格[1-4]和单元格[9-12]排除在外来居中某些内容。

以下是基于prime faces网格系统的示例：

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

上述表单中的评论应该很清楚地说明了我上面所说的意思。网格系统通常会提供CSS类，以使您的UI在多种设备的形态因素上工作，尽管......在这方面，我认为您不能使用桌面UI制作出好的移动UI，也不能使用移动UI制作出好的桌面UI。在我看来，你可以做出一个不错的平板电脑/桌面UI，但你应该从头开始编写页面，仅包含最少必要的内容以适应移动端。但这是另一种讨论......只是想说，flex grid css类只能带你走那么远。理论上有很多潜力，比在div元素上硬编码任意固定长度要好得多......但它并不是解决所有问题的万金油。

- 99Sono

因此，您建议使用p:panelGrid layout="grid"（PF 6.1文档第365页）。除此之外，如果“相对应”的JSF组件的优势过于有限，我会尝试使用纯HTML。 - Kukeltje

嗨，当您使用Prime Faces（JSF）时，我倾向于使用它们的网格系统，而不是面板网格。通常在任何地方使用表格都不是最佳实践。请参见https://www.primefaces.org/showcase/ui/panel/grid.xhtml下的网格CSS。无论您使用Angular还是JSF，它都是基于纯CSS的，您不需要使用花哨的组件来完成这项工作。 - 99Sono

阅读文档...（并检查展示面板网格的生成HTML源代码）。使用layout="grid"将使用网格系统（用于响应式设计）。而且在任何地方都不使用表格是错误的...如果某些东西是一个表格（或网格，如数据表或面板网格），那么它并不是错误的。只是不要将其用于页面布局。 - Kukeltje

好的，那么您可以使用带有布局网格的panelGrid组件。至于表格，很抱歉但是使用表格的实际用例非常少。虽然基于DIV的表格可以逐步呈现并且对于较小的表单因素具有响应性，但是具有多行的完整表格元素会被渲染为“宇宙大爆炸”- 您经常会发现人们抱怨大型表格渲染速度慢。您需要表格中的所有数据，并且由浏览器一次性呈现。总的来说，最好不要使用表格。表格样式可能存在问题，而且难以解决。 - 99Sono

是的，我并不完全不同意你的观点（也不完全同意），但事情不应该教条化...而且你可以覆盖table、tr和td的CSS（在我看来非常容易），所以你甚至可以使现有组件“响应式”...我做到了。最困难的事情是你需要为盲人和聋人添加所有新的“属性”。这并不是说这样做不好，但这有点重复劳动。干杯！ - Kukeltje

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

JSF的<p:panelGrid>组件呈现了一个HTML<table>元素，它默认是块级元素。要使块级元素本身居中，应将其水平边距设置为auto，而不是尝试将其内联内容居中。

.panelGridCenter {
    margin: 0 auto;
}

另请参阅：

如何在CSS中使一个div居中