如何将 JSF 组件对齐到中心答案

【问题标题】：How to align JSF components to center如何将 JSF 组件对齐到中心
【发布时间】：2012-09-27 08:58:07
【问题描述】：

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

【问题讨论】：

标签： css jsf jsf-2 primefaces alignment

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果你想将 primefaces:panelGrid 的内容设置为居中，你可以试试这个：

<h:panelGrid column="1">

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

           your contents...

   </h:panelGroup>

</h:panelGrid>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

尝试使用 css 和 p:panelGrid columnClasses 属性：

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

.centered { text-align: center; }

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

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

【讨论】：