如何将 JSF 组件对齐到中心

Posted

技术标签:

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

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

【问题讨论】:

【参考方案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%;

【讨论】:

以上是关于如何将 JSF 组件对齐到中心的主要内容,如果未能解决你的问题,请参考以下文章

如何将中心的 material-ui 组件与响应行为对齐?

如何将服务器端和客户端的 tabview 组件与 jsf 匹配?

如何使用 GridBagLayout 在 JPanel 中对齐组件中心?

如何将占位符属性添加到 JSF 输入组件?

如何将 JSF 组件绑定到支持 bean 属性

JSF 2 - 如何将 Ajax 侦听器方法添加到复合组件接口?