CSS 如何将 <p:panel> 的内容垂直对齐居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16377336/
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 contents of <p:panel> vertical-align to center
提问by Abhishek Dhote
In my JSF-PrimeFaces webapp I am having and I need to vertical-align its contents to center. How can I do that?
在我的 JSF-PrimeFaces webapp 中，我需要将其内容垂直对齐到中心。我怎样才能做到这一点？
<p:panel id="businesses_panel" header="#{business.businessName}" styleClass="mini-panel panel-grid tr panel-grid td panel-hover panel-header-title-small">
<div align="center">
<p:panelGrid columns="1">
<div class="component-spacing-top"/>
<h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}" class="small-panel-image" />
<div class="component-spacing-top"/>
</p:panelGrid>
</div>
回答by ?mer Faruk Almal?
<p:panel style="height:500px;position:relative;"/>
<p:panelGrid columns="1" styleClass="centered">
<div class="component-spacing-top"/>
<h:graphicImage alt="#{business.businessName}" value="#{business.logoFullPath}" class="small-panel-image" />
<div class="component-spacing-top"/>
</p:panelGrid>
</p:panel>
heightvalue is randomly given it does not matter, but do not erase position:relative.
height值是随机给出的没关系，但不要擦除position:relative。
.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}
For horizontal you should add below rules:
对于水平，您应该添加以下规则：
left:50%;margin-left:-100px;width:200px;
Look out, margin-leftvalue is the -1/2 times of widthvalue.
注意，margin-left价值是价值的-1/2倍width。
Result:
结果：
If widthis not fixed you can try this way it works on me and aligns it center horizontally and vertically at same time:
如果width不固定，您可以尝试这种方式，它适用于我并同时将其水平和垂直居中对齐：
<p:panel style="line-height:200px;padding: 5% 0;position: relative;"/>
<p:panelGrid columns="1" styleClass="centered">
<div class="component-spacing-top"/>
<h:graphicImage style="vertical-align:middle;" alt="#{business.businessName}" value="#{business.logoFullPath}" class="small-panel-image" />
<div class="component-spacing-top"/>
</p:panelGrid>
</p:panel>
Note that graphicImage has styleproperty as well.
请注意，graphicImage 也具有style属性。
.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}
Result:
结果：
Even if doesn't work you should check the link that I gave inside about. That was what I am doing there are 6 ways and you should mix them.
即使不起作用，您也应该检查我在里面提供的链接about。这就是我正在做的有 6 种方法，你应该混合使用它们。
回答by DEREK LEE
If that doesn't work you can wrap it with 2 divs. Idea is to make any element inside these two divs behave like a table, td to be specific.
如果这不起作用，您可以用 2 个 div 包装它。想法是让这两个 div 中的任何元素都表现得像一个表格，具体来说就是 td。
<div class="centerContainer">
<div class="centerContent">
<panel...>
</panel>
</div>
</div>
div.centerContainer
{
top: 0; left: 0; width: 100%; height: 100%;
position: absolute; display: table
}
div.centerContent {display: table-cell; vertical-align: middle}
This works well with primefaces layout too !.
这也适用于primefaces布局！。
<p:layout fullPage="true">
<!-- Header -->
<!-- Footer -->
<!-- Mid Content -->
<p:layoutUnit position="center">
<div class="centerContainer">
<div class="centerContent">
<ui:insert name="content"></ui:insert>
</div>
</div>
</p:layoutUnit>
</p:layout>
