Flex MX text doesn't vertically align, but other components do

I have the following code layout in mxml. The button will be positioned correctly in the middle, but the text remains anchored to the top. This is not the behavior of the spark component label, but I need multiple style runs in the text and have found the mxText component to be the best solution...

<s:Group>
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle" gap="0" />
    </s:layout>
    <mx:Text id="title" 
             htmlText="{sourcecodehere}" 
             width="212" 
             height="55"
             textAlign="center"

             />
    <s:Button id="getNow" 
              label="Get Now" skinClass="skins.CustomButton"
               verticalCenter="middle"
              click=开发者_如何学运维"getNowEventHandler()" />


</s:Group>

I am using Flex 4, I know I should probably be using a spark text component, but I was just so comfortable with the implementation of htmlText I don't want to move on...

It is not appearing to align in the center because... it IS in the center already. Blew your mind, huh? :)

The text is at the top of the label, but the label itself is taking 100% of the vertical space at 55 pixels.

You can illustrate this by taking height="55" and putting it on the button instead. The Label now takes only the space it needs, and then it centers itself.

Why do you want your label to be hard coded to 55 like that?