如何对齐<p：panel> vertical-align to center </p：panel>的内容

Question

在我的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>

Answer 1

<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>

height值随机给出无关紧要，但不要删除position:relative。

.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}

对于横向，您应该添加以下规则：

left:50%;margin-left:-100px;width:200px;

请注意，margin-left值是width值的-1/2倍。

<强>结果：

如果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>

请注意，graphicImage也具有style属性。

.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}

<强>结果：

即使不起作用，您也应该检查我在about中提供的链接。这就是我正在做的有6种方法你应该混合它们。

• About
• Demo

Answer 2

如果这不起作用，你可以用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}

这也适用于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>