Vertically centre components in top of page header area?

asked 2019-04-10 02:01:07 +0800

davout
1435 ● 3 ● 18

I'm building a pretty standard web page using a 'borderlayout' that has a 'north' area reserved for the usual mix of things like:

• App home page icon
• App logo User info
• user info
• System men

I'm trying to get the various components to centre vertically in the vertical space available, but can't this to work

I'm using templates, and the ZUL file shown below is what is injected into the north area

<zk>
    <borderlayout height="70px" >
        <west border="none" >
            <hlayout>
               <image src="/image/home-small.png" width="32px" height="32px" />
                <space />
               <image src="/image/logo-1.png" width="131px" height="36px" />
            </hlayout>
        </west>
        <center border="none">

        </center>
        <east border="none"  >
            <hbox align="end" pack="center" hflex="1" vflex="1">
                <label value="User: " />
                <label value="fred"  sclass="label-bold" />
                <space orient="horizontal" width="20px"/>
                <label value="Tenant: " />
                <label value="acme" sclass="label-bold"/>
                <space orient="horizontal" width="50px"/>
                <menubar id="mainMenu" orient="horizontal">
                    <menuitem label="Admin"/>
                    <menuitem label="My account"/>
                    <menuitem label="Support"/>
                    <menu label="Help">
                        <menupopup>
                            <menuitem label="General Help" />
                            <menuitem label="Getting started" />
                            <menuitem label="About us" />
                            <menuitem label="About the product" />
                        </menupopup>
                    </menu>
                    <menuitem label="Log out"/>
                </menubar>
            </hbox>
        </east>
    </borderlayout>
</zk>

The 'label' components align vertically at the bottom of the vertical space, even though the hbox component pack attribute has been set to 'center'.

Any suggestions?