如何将 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 组件对齐到中心的主要内容,如果未能解决你的问题,请参考以下文章
如何将服务器端和客户端的 tabview 组件与 jsf 匹配?