Center the <af:outputText> element in ADF template

Question

How can I center the in adf template ?

Following is the code

<af:panelGroupLayout id="pt_g1" layout="horizontal" valign="middle" halign="start" rendered="true">
  <af:spacer width="15" id="pt_s1"/>
  <af:image id="pt_i1" source="/images/logo.png" inlineStyle="height:70px; width:70px;"/>
  <af:outputText value="My First Application" id="pt_ot1" inlineStyle="font-size:x-large; color:White;" noWrap="true"/>
</af:panelGroupLayout>

I am using JDeveloper 12c

--- UPDATE ---

I've tried following. But it gives slight different behaviour than expected.

<af:panelStretchLayout id="pt_psl2" startWidth="33%" endWidth="33%">
    <f:facet name="center">
        <af:panelGroupLayout id="pt_pgl1" inlineStyle="min-width:33%;" halign="center" valign="middle">
            <af:outputText value="test application" id="pt_ot1" inlineStyle="font-size:x-large; color:White;" noWrap="true"/>
        </af:panelGroupLayout>
    </f:facet>
    <f:facet name="start">
        <af:panelGroupLayout id="pt_pgl3" inlineStyle="min-width:33%;">
            <af:spacer width="15" id="pt_s1"/>
            <af:image id="pt_i1" source="/images/test_logo.png" inlineStyle="height:70px; width:70px;"/>
        </af:panelGroupLayout>
    </f:facet>
    <f:facet name="end">
        <af:panelGroupLayout id="pt_pgl2" inlineStyle="min-width:33%;" halign="end" valign="middle">
            <af:image source="images/home.png" id="pt_i2"/>
            <af:link text="Home" id="pt_l5" inlineStyle="color:White;"/>
        </af:panelGroupLayout>
    </f:facet>
</af:panelStretchLayout>

As we can see in output it starts content from the left side, while I want logo to start from left side, Application title in middle of the page and other links section from right side of the page.

How can I achieve the same ?

Answer 1

Use a af:panelStretchLayout instead of af:panelGroupLayout. It has 5 facets. You can put your content in the "center" facets and either remove the others or put a spacer in them.

Answer 2

Assuming on one of the later releases of ADF you should be looking into af:panelGridLayout to implement those type of UIs.