Question

在我的JSF 2 - Primefaces 3网络应用程序中，我使用<p:panelGrid>和<p:panel>。我在其中有多个组件，这些组件是左对齐的。我需要全部成为中心对齐。我们怎么能这样做我试图使用div但它不起作用。

Answer 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;将其居中。

Answer 2

如果你想设置一个primefaces：panelGrid到center的内容你可以试试这个：

<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:panelGrid columnClasses属性：

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

.centered { text-align: center; }

如果p:panelGrid列中的组件不仅仅是文本，请将margin属性添加到css类中：

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

如何将JSF组件与中心对齐

4 个答案: