如何将 <p:panel> 的内容垂直对齐到中心答案

【问题标题】：How to align contents of <p:panel> vertical-align to center如何将 <p:panel> 的内容垂直对齐到中心
【发布时间】：2013-04-28 22:40:21
【问题描述】：

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

【问题讨论】：

标签： css jsf-2 primefaces

【解决方案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

【讨论】：

@Abhishek 应该，反正可以用这种方式再检查一遍吗？
是的，这种方式垂直对齐有效，但列出水平对齐。
@Abhishek 的问题是关于垂直的，这就是我没有列出的原因。但现在您也可以水平对齐内容。
在我的情况下宽度不是固定的，事实上我将整个组件都放在数据表中。所以宽度取决于内容。有没有解决方案，非常感谢您花时间解决这个问题。非常感谢:)
@Abhishek 没关系，但那是我的最后一枪，我想希望能成功，我能得到我的代表 :)

【解决方案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>

【讨论】：