【问题标题】: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?在&lt;h:body&gt;?
    【解决方案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 - 您经常会发现人们抱怨大表格呈现速度慢。您需要存在表格的所有数据,并且浏览器一次性呈现。一般来说,你最好不使用表格。样式表可能存在问题,但很难。
    • 是的,我并不完全不同意你(也不完全同意)但事情不应该是教条主义的......你可以覆盖tabletr和@的css 987654326@(imo 很容易)所以你甚至可以让现有的组件“响应”......我做到了最困难的是你需要为盲人和聋人添加的所有新“属性”。并不是说这样做不好,但它有点重复了很多努力。干杯
    【解决方案3】:

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

    .panelGridCenter {
        margin: 0 auto;
    }
    

    另见:

    【讨论】:

      猜你喜欢
      • 2011-10-13
      • 2014-10-04
      • 1970-01-01
      • 2012-09-27
      • 2013-03-15
      • 2012-11-29
      • 2013-10-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多