jsf页面上的中心组件 [英] Center component on jsf page

问题描述

我试图将组件放在jsf页面中，看起来像这样:

I was trying to center the component in jsf page, it looks sth like this:

<p:panel header="Enter your credentials:" style="vertical-align:middle;">

    <h:panelGrid columns="2" styleClass="panelGridCenter">
                <h:outputText value="Login: " />
                <p:inplace id="Login">
                    <p:inputText value="Enter login" />
                </p:inplace>
            </h:panelGrid>
    </p:panel>

我试图这样输入:

style="vertical-align:middle;"

我尝试使用CSS类(我几乎没有使用CSS的经验):

I've tried to use a css class (I've had almost no experience with css):

.panelGridCenter {
      margin: 0 auto;
      vertical-align:middle;
}

但是它不起作用. 您能给我任何示例或提示，如何将该组件(面板)放置在jsf页面的中心吗?

But it doesn't work. Can you give me any examples or hints how to position this component (panel) in the center of the jsf page?

p-素面

提前谢谢

推荐答案

尝试下面的代码，我希望这个答案是您的问题

Try below code I will hope this answer be your question

<h:form>            
        <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"  class="outer_table">
            <tr>
                <td>
                    <table width="500" height="300" cellpadding="0" cellspacing="0" border="0" align="center">
                        <tr>
                            <td align="center">
                                <p:panel header="Login">
                                    <h:panelGrid columns="2" cellpadding="5">

                                        <h:outputLabel for="username" value="username" />
                                        <p:inputText id="username" value="#{loginBean.uname}" required="true" label="username"/>

                                        <h:outputLabel for="password" value="password" />
                                        <p:password id="password" value="#{loginBean.password}" required="true" label="password" />

                                        <p:commandButton value="Login"  action="#{loginBean.loginProject}" update=":growl"/>

                                    </h:panelGrid>
                                </p:panel>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </h:form>

css

<script type="text/css">
    html, body
    {
        margin:0px;
        padding:0px;
        width:100%;
        min-height:100%;
        height:100%;
    }
    .outer_table
    {
        width:100%;
        height:100%;
    }
</script>

这篇关于jsf页面上的中心组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！