How to Align Jsf Components to Center

How to align JSF components to center

Look at the generated HTML output and alter CSS accordingly.

If the HTML element which you'd like to center is a block element (<div>, <p>, <form>, <table>, etc, or forced by display: block;), then you first need to give it a known width and then you can center it relative to its parent block element using CSS margin: 0 auto; on the element itself.

If the HTML element which you'd like to center is an inline element (<span>, <label>, <a>, <img>, etc, or forced by display: inline;), then you can center it using CSS text-align: center; on its parent block element.

Center component on jsf page

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>

How to align PanelGrid to center? JSF-Primefaces

The JSF <p:panelGrid> component renders a HTML <table> element which is by default a block level element. To center the block level element itself, you should set its horizontal margin to auto instead of attempting to center its inline contents.

.panelGridCenter {
    margin: 0 auto;
}

See also:

• Center a div in CSS

JSF Components alignment inside panelGroup

Give <h:panelGroup> these styles

.panelGroup{
  display: flex;
  align-items: center;
}

How to align contents of p:panel vertical-align to center

<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 value is randomly given it does not matter, but do not erase position:relative.

.centered {
position: absolute;
height: 100px;
top: 0;
bottom: 0;
margin:auto;
}

For horizontal you should add below rules:

left:50%;margin-left:-100px;width:200px;

Look out, margin-left value is the -1/2 times of width value.

Result:

If width is not fixed you can try this way it works on me and aligns it center horizontally and vertically at same time:

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

Note that graphicImage has style property as well.

.centered {
position:relative;
height: 100px;
margin:0 auto;
padding: 10% 0;
}

Result:

Even if doesn't work you should check the link that I gave inside about. That was what I am doing there are 6 ways and you should mix them.

• About
• Demo

Align nested h:panelGrid in center

I don't think you are going about centering a panelGrid the right way. This has been discussed in several other questions on this site. panelGrid renders to a , a block level element. text-lign: center will just center the text in it. You should use margin: 0 auto to adjust the margins.

Look at these answers to help:

How to align PanelGrid to center? JSF-Primefaces

Center a div in CSS - Bad questions, good answer

Edit:
I made a quick project with your page and was able to center all 3 panelGrids:

The code for it is below, (I added 10px top margins instead of 0 to more easily tell the panels apart):

    <h:panelGrid id="A" border="1" columns="1" style="margin: 10px auto; width: 100%; ">                            
        <h:panelGrid id="B" border="1" columns="2" style="margin: 10px auto;  width: 460px">
            <h:panelGrid border="1" columns="1" style="margin: 10px auto;">
                <h:inputText style="width: 310px; " ></h:inputText>                             
            </h:panelGrid>
            <h:commandButton value="Add"></h:commandButton>
        </h:panelGrid>
    </h:panelGrid>

How to align two commandButtons inside a form

Wrap them in a div or span content and text-align: center that div.

<div class="form-group center">
  <p:commandButton value="C1" action="#{login.login}" />
  <p:commandButton value="C2" action="#{login.login}" />
</div>
<style>
  .center {
    text-align: center;
  }
</style>

There are many many ways to achieve this, and maybe looking into CSS could help understand it a bit more.

Helpful link: https://www.w3.org/Style/Examples/007/center.en.html#block

How render form at the center

<h:head>
    <h:outputStyleSheet library="css" name="stylesheet.css/>
</h:head>   

<div id="formdiv">    
    <h:form id="frm">
        ...
    </h:form>
<div>

stylesheet.css

#formdiv {
    margin: 0 auto;
}

-Or-

<head>
    <style>
        #formdiv {
            margin: 0 auto;
        }
    </style>
</head>

<h:body>
    <div id="formdiv">    
        <h:form id="frm">
            ...
        </h:form>
    <div>
</h:body>

Also see How to center a div horizontally

And How to position div in middle of screen

---

Related Topics