CSS 如何将 JSF 组件居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12759192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align JSF components to center
提问by Abhishek Dhote
In my JSF 2 - Primefaces 3 web application, I am using <p:panelGrid>and <p:panel>. I have multiple components inside them which are left justified. I need to all to be center align. How can we do this I tried to use div but it does not work.
在我的 JSF 2 - Primefaces 3 Web 应用程序中，我使用<p:panelGrid>和<p:panel>. 我在其中有多个组件，它们是左对齐的。我需要全部居中对齐。我们怎么能做到这一点我尝试使用 div 但它不起作用。
回答by BalusC
Look at the generated HTML output and alter CSS accordingly.
查看生成的 HTML 输出并相应地更改 CSS。
If the HTML element which you'd like to center is a block element(<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto;on the element itself.
如果您想要居中的 HTML 元素是块元素（<div>, <p>, <form>,<table>等，或由 强制display: block;），那么您首先需要给它一个已知的宽度，然后您可以使用它相对于其父块元素居中margin: 0 auto;元素本身的CSS 。
If the HTML element which you'd like to center is an inline element(<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center;on its parent block element.
如果您想中心的HTML元素是一个内联元素（<span>，<label>，<a>，<img>，等，或被迫display: inline;），那么你可以使用CSS居中text-align: center;其父块元素。
回答by Ebrahim Amini Sharifi
If you want to set the content of a primefaces:panelGrid to center you can try this:
如果要将 primefaces:panelGrid 的内容设置为居中，可以尝试以下操作：
<h:panelGrid column="1">
<h:panelGroup style="display:block; text-align:center">
your contents...
</h:panelGroup>
</h:panelGrid>
回答by premma
We are using RichFaces, but the solution that we used in this case may apply to Primefaces as well. We used to style the inner elements with css.
Once you render the page in the browser, you can look up the source code and find out what HTML elements are rendered. Then create specific CSSclasses and style the whole panel or the inner elements in panelGrid to that class.
我们使用的是 RichFaces，但我们在这种情况下使用的解决方案也可能适用于 Primefaces。我们过去常常使用 css 来设置内部元素的样式。
在浏览器中呈现页面后，您可以查找源代码并找出呈现的 HTML 元素。然后创建特定的 CSS类并将整个面板或 panelGrid 中的内部元素设置为该类。
Most of the time, this was the easiest solution and also sufficient.
大多数时候，这是最简单的解决方案，也足够了。
回答by Akos K
Try with css and p:panelGridcolumnClasses attribute:
尝试使用 css 和p:panelGridcolumnClasses 属性：
<p:panelGrid columnClasses="centered">
...
</p:panelGrid>then in your stylesheet create a class like:
<p:panelGrid columnClasses="centered">
...
</p:panelGrid>然后在您的样式表中创建一个类，如：
.centered {
text-align: center;
}
.centered {
text-align: center;
}
If you have components in your p:panelGridcolumn other than just text, add the margin attribute to your css class:
如果您的p:panelGrid列中除了文本之外还有其他组件，请将 margin 属性添加到您的 css 类：
.centered {
text-align: center;
margin-left: 50%;
}
.centered {
text-align: center;
margin-left: 50%;
}
