如何將<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>垂直對齊的內容與中心對齊

回答

相關問題