How to set label's text vertical alignement to center in a mobile flex project?

Question

The project is mobile flex. I placed a label and a textinput inside a vgroup container :

    <s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
        <s:HGroup>
            <s:Label id="l_url" text="url"/>
            <s:TextInput id="url" invalid="url.getFocus()"/>
        </s:HGroup>
        <s:HGroup>
            <s:Button label="Enregistrer" click="enregistrer(event)" styleName="" />
            <s:Button label="Annuler" click="navigator.popView()"/>
        </s:HGroup>
    </s:VGroup>

In runtime the label's text is at the top of the label :

How to place the label's text to center vertically ?

Answer 1

Looks like you're missing a verticalAlign="middle" in your HGroup.

<s:HGroup verticalAlign="middle">
  <s:Label id="l_url" text="url"/>
  <s:TextInput id="url" invalid="url.getFocus()"/>
</s:HGroup>

Also I don't usually use form containers, but since you're only doing a mobile UI that might be a good suggestion to look into here if you don't mind the limitations.

Answer 2

Try verticalAlign="baseline":

<s:HGroup width="100%" verticalAlign="baseline" paddingLeft="8" paddingRight="8">
    <s:Label text="Игровые столы:" />
    <s:RadioButton id="_allBtn" group="{_filter}" label="Все" selected="true" />
    <s:RadioButton id="_vacBtn" group="{_filter}" label="Свободные" />
    <s:RadioButton id="_fullBtn" group="{_filter}" label="Полные" />
    <s:Spacer width="100%" />
    <s:Label text="Игроки в лобби: {_users.length}" />
</s:HGroup>

Here how it looks in my Flex web application (see the Label and RadioButtons in the top row):