如何将<p:panel>的内容与vertical-align对齐

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值是值的-1/2倍width.

结果:

如果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种方法,你应该混合它们.

• 关于
• 演示