Trying to align a label in a text box

Question

I am trying to align my text over a VBox correctly. The VBox I am using has a background image. Then the label overlaps the image. This is basically creating an button I want.

The issue is that the background image I am using has a shadow effect on the bottom. So when I use verticalAlign="middle" on the VBox it isn't actually centered.

I have tried changing the VBox and the Labels y value, top & bottom properties, and verticalCenter property. None of them seem to shift the label up or down in anyway. I am confused on why these would not shift the label.

Here is my current code w/o any y, top, bottom or verticalCenter set.

<mx:VBox height="70" width="175" backgroundImage="{buttonBackground}" verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" buttonMode="true" useHandCursor="true" mouseChildren="false" click="{controller.goToPage('configPg')}">
  <mx:Label text="Configure" buttonMode="true" useHandCursor="true" mouseChildren="false" fontSize="24" color="white"/>
</mx:VBox>

Any help would be greatly appreciated.

Thanks

Answer 1

I was able to solve this by adjusting the paddingBottom. Thanks drkstr1 for the answer.

All the properties you tried are irrelevant in a layout container. Use the font styles to position your text (EG. padding, verticalAlign, textAlign, etc.), Or use a Canvas with manual positioning if there is nothing else in the VBox. – drkstr1 Nov 14 at 17:25