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 具有有限的宽度，上述将左右边距作为自动播放的技术将起作用。例如，为了让您开始成为任何效果，您必须设置宽度 = 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。在我看来，你可以获得一个好的 Tablet/Desktop UI，但你应该从头开始编写页面，其中包含移动设备所需的最少内容。但这是一个不同的讨论......只是说，flex grid css 类只会带你到目前为止。理论上有很多潜力，比在 div 元素上硬编码一些任意固定长度要好得多……但也不是解决所有问题的灵丹妙药。

于 2017-09-17T14:05:24.450 回答
0

如果你想右对齐

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