Question

我知道有很多关于这个问题的问题，但是对我来说没有任何问题。

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

这是我的panelgrid

<p:panelGrid styleClass="panelGridCenter">

和我的CSS：

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

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

Answer 1

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

.panelGridCenter {
    margin: 0 auto;
}

另见：

Center a div in CSS

Answer 2

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

如果你想把像div这样的东西居中，只要你的DIV宽度有限，上面用左右边距作为自动的方法就可以了。例如。为了让你开始产生任何效果，你必须放置宽度= 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>

上述表格的评论应该清楚地说明我的意思。网格系统通常会提供CSS类，以允许您的UI跨设备的多种形状因素工作，虽然......就此而言，我认为您无法使用桌面UI创建良好的移动UI使用移动UI的桌面UI。在我看来，你可以得到一个很好的平板电脑/桌面用户界面，但你应该从头开始编写页面，只需要最少的移动内容。但这是一个不同的讨论...只是说，flex网格css类只会带你到目前为止。在理论上有很多潜力，比在你的div元素上硬编码一些任意固定长度要好得多......但对于你所有的问题都不是银弹。

Answer 3

如果你想要正确对齐

.rightAlign{
     margin-left: auto;
 }

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

3 个答案:

另见：