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

在我的JSF-PrimeFaces web应用程序中，我需要垂直对齐它的内容以居中。我怎样才能做到这一点？如何将<p:panel>垂直对齐的内容与中心对齐

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

来源

2013-05-04 Abhishek Dhote

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

结果：

enter image description here

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

结果：

enter image description here

即使不工作，你应该检查，我给里面about的链接。那是我在这里做的6种方式，你应该混合它们。

About

来源

2013-05-04 22:10:53

我试过两个，没有工作。 – 2013-05-05 08:39:14

@Abhishek无论如何，它可以用这种方式再次检查出来吗？ – 2013-05-05 09:29:33

是的，这种方式垂直对齐工作，但列出水平对齐。 – 2013-05-05 10:00:36

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

来源

2015-02-11 18:50:08

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

回答

相关问题