CSS 如何将 PanelGrid 居中对齐？JSF-Primefaces
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15657364/
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 PanelGrid to center? JSF-Primefaces
提问by Johnny2012
I know that there are many questions about this issue, but nothing worked for me properly.
我知道关于这个问题有很多问题，但没有什么对我有用。
I need to align my PanelGrid to center(horizontal).
我需要将我的 PanelGrid 对齐到中心（水平）。
this is my panelgrid
这是我的面板网格
<p:panelGrid styleClass="panelGridCenter">
and my CSS:
和我的 CSS：
.panelGridCenter td,.panelGridCenter tr {
text-align: center;
}
It just aligns the content to center, but not the panelGrid
它只是将内容对齐到中心，而不是 panelGrid
回答by BalusC
The JSF <p:panelGrid>component renders a HTML <table>element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to autoinstead of attempting to center its inline contents.
JSF<p:panelGrid>组件呈现一个 HTML<table>元素，默认情况下它是块级元素。要将块级元素本身居中，您应该将其水平边距设置为 ，auto而不是尝试将其内联内容居中。
.panelGridCenter {
margin: 0 auto;
}
See also:
也可以看看：
回答by 99Sono
The above answer is technically correct but also incomplete.
上述答案在技术上是正确的，但也不完整。
If you want to center something like a div, the above technique of playing with the left and right margin as auto will work, provided that your DIV has limited width. E.g. For you to start being any effect you would have to put something like a width=60%.
如果您想将 div 之类的东西居中，则上述将左右边距设为 auto 的技术将起作用，前提是您的 DIV 宽度有限。例如，要开始使用任何效果，您必须设置宽度=60% 之类的东西。
And then, once you realize you need to play with fixed widths... you immediately are prompted to the next question: So what exactly should I type in as my fixed width?
然后，一旦你意识到你需要使用固定宽度...你会立即被提示到下一个问题：那么我到底应该输入什么作为我的固定宽度？
That is why I believe the better answer for this question is: CSS techniques like the one above, are OK for the small details on a web page. But your coarse grained approach for centering anything on a web page should be to make use of a grid system. Most grid systems use 12 cells. If for example your grid system would be by default make 12 cells = 100% width. You could center something by, for example placing your content to be centered in cells [5-8] leaving out as centurion space cells [1-4] and cells [9-12].
这就是为什么我认为这个问题的更好答案是：像上面那样的 CSS 技术，适用于网页上的小细节。但是您在网页上居中放置任何内容的粗粒度方法应该是利用网格系统。大多数网格系统使用 12 个单元格。例如，如果您的网格系统默认为 12 个单元格 = 100% 宽度。例如，您可以将内容居中放置在单元格 [5-8] 中，而不是百夫长空间单元格 [1-4] 和单元格 [9-12]。
Here is an example based in prime faces grid system:
这是一个基于素面网格系统的示例：
<h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
<form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
<!-- (a) Start a grid system-->
<div class="ui-g ui-fluid">
<!-- (b) Eat the first four cells of the grid -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (c) In the center location of the grid put in the Login form -->
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
</div>
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
<input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
</div>
</div>
<!-- (d) Eat the rest of the first row of the grid without setting any contents -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (e) Start the second row and eat the first four cells -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (f) Position a form submit button on the fifth cell -->
<div class="ui-g-12 ui-md-1">
<button id="loginSubmit" pButton type="submit" label="Submit"></button>
</div>
</div>
</form>
The comments on the above form should make it pretty clear what I meant above. The grid system will normally offer CSS classes to allow your UI to be working across multiple form factors of devices, although ... on this regard I am of the opinion that you can not make a good mobile UI using a desktop UI nor a good desktop UI using a mobile UI. On my opinion you can get a good Tablet/Desktop UI cooked up, but you should write pages from scratch with the minimal an necessary contents for mobile. But that is a different discussion ... just to say, that the flex grid css classes will only take you so far. A lot of potential in theory, much better than hard coding some arbitrary fixed length on your div elements ... but not a silver bullet for all of your problems either.
对上述表格的评论应该很清楚我上面的意思。网格系统通常会提供 CSS 类，以允许您的 UI 跨设备的多种形式因素工作，尽管……在这方面，我认为您不能使用桌面 UI 制作一个好的移动 UI，也不能制作一个好的移动 UI。使用移动 UI 的桌面 UI。在我看来，你可以得到一个很好的平板电脑/桌面用户界面，但你应该从头开始编写页面，使用最少的移动必要内容。但这是一个不同的讨论......只是说，flex grid css 类只会带你到这里。理论上有很多潜力，比在 div 元素上硬编码一些任意固定长度要好得多……但也不是解决所有问题的灵丹妙药。
回答by fjkjava
In case if you want right align
如果你想右对齐
.rightAlign{
margin-left: auto;
}
