css - 如何将 JSF 组件对齐到中心

Question

在我的 JSF 2 - Primefaces 3 Web 应用程序中，我使用<p:panelGrid>和<p:panel>. 我在其中有多个组件，它们是左对齐的。我需要所有人都居中对齐。我们怎么能做到这一点我尝试使用 div 但它不起作用。

Answer 1

查看生成的 HTML 输出并相应地更改 CSS。

如果您想要居中的 HTML 元素是块元素（<div>、<p>、<form>、<table>等，或强制为display: block;），那么您首先需要给它一个已知的宽度，然后您可以使用元素本身的CSS margin: 0 auto;。

如果您想要居中的 HTML 元素是一个内联元素（<span>、<label>、<a>、<img>等，或由 强制display: inline;），那么您可以使用 CSStext-align: center;在其父块元素上居中。

Answer 2

如果您想将 primefaces:panelGrid 的内容设置为居中，您可以尝试以下操作：

<h:panelGrid column="1">

   <h:panelGroup style="display:block; text-align:center">

           your contents...

   </h:panelGroup>

</h:panelGrid>

Answer 3

我们正在使用 RichFaces，但我们在这种情况下使用的解决方案也可能适用于 Primefaces。我们曾经用 css 设置内部元素的样式。
在浏览器中渲染页面后，您可以查找源代码并找出渲染了哪些 HTML 元素。然后创建特定的 CSS类并将整个面板或 panelGrid 中的内部元素设置为该类。

大多数时候，这是最简单的解决方案，也足够了。

Answer 4

尝试使用 css 和p:panelGridcolumnClasses 属性：

<p:panelGrid columnClasses="centered"> ... </p:panelGrid> 然后在您的样式表中创建一个类，如：

.centered { text-align: center; }

如果您的p:panelGrid列中除了文本之外还有其他组件，请将 margin 属性添加到您的 css 类：

.centered { text-align: center; margin-left: 50%; }