Center component on jsf page - html

Question

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>
I've tried to enter sth like this:
style="vertical-align:middle;"
I've tried to use a css class (I've had almost no experience with css):
.panelGridCenter {
margin: 0 auto;
vertical-align:middle;
}
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 - primefaces
thx in advance

Answer 1

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>

Answer 2

This may be irrelevant as I cannot answer your question, but a dialog (centered by default) looks pretty cool for a login-page:
<h:body>
<p:growl id="growl" life="5000" autoUpdate="true" showDetail="true" escape="false"/>
<h:form>
<p:dialog id="dialog" header="Login" footer="..." width="400" widgetVar="dlg" visible="true" closable="false" showEffect="clip" draggable="false" resizable="false" style="box-shadow: 7px 10px 5px #303030;">
<p:panelGrid columns="2" style="margin: 0 auto">
<h:outputText value="username:"/>
<h:inputText value="#{loginBean.username}" id="username"/>
<h:outputText value="password:"/>
<h:inputSecret value="#{loginBean.password}" id="password"/>
</p:panelGrid>
<p:commandButton id="button" value="Login" action="#{loginBean.doLogin}" style="float:right"/>
</p:dialog>
</h:form>
</h:body>
visible="true" makes the dialog show automatically after load.
Inspired by this article, also showing how to secure parts of the application.

Answer 3

I am not an expert but sharing my own experience. After putting the panel into form, try putting the form into div with style as below:
<div style="width:360px; margin: 10% auto 10% auto;">
<h:form>
....
</h:form>
</div>