Adobe Flex: vertical alignment of labels in a Form control

Like shown in the following picture I've got a form in my application. There are 3 FormItems, of which two contains a ComboBox and one a HGroup with a ComboBox and an Image.

In the last FormItem the label isn't centered vertically.

The difference between FormItem 2-3 (in the pic red) is 18px.

The difference between FormItem 1-2 (in the pic green) is 22px.

I assume this is because of the HGroup but I don't know how to solve this problem.

Any 开发者_如何转开发hints?

The code is:

<mx:Form>
  <mx:FormItem id="type" label="xxx:">
    <s:ComboBox />
  </mx:FormItem>
  <mx:FormItem label="xxx:">
    <s:ComboBox />
  </mx:FormItem>
  <mx:FormItem label="xxx:">
    <s:HGroup verticalAlign="middle"
              height="25">
        <s:ComboBox />
        <mx:Image source="@Embed(source='assets/icons/info_xsmall.png')" />
    </s:HGroup>
  </mx:FormItem>
</mx:Form>

Do you need the HGroup? Instead try using the "direction" property of FormItem and setting it to "horizontal". So your code would now be:

<mx:Form>
  <mx:FormItem id="type" label="xxx:">
    <s:ComboBox />
  </mx:FormItem>
  <mx:FormItem label="xxx:">
    <s:ComboBox />
  </mx:FormItem>
  <mx:FormItem label="xxx:" direction="horizontal">
        <s:ComboBox />
        <mx:Image source="@Embed(source='assets/icons/info_xsmall.png')" />
  </mx:FormItem>
</mx:Form>