mx Text not centering in bordercontainer

149 Views Asked by At

So I have a borderContainer and have a text in it and the text is always moved 2 - 4 pixels to the left, I need it perfectly centered.

code

<s:BorderContainer id="box" width="100%" borderWeight="0"
backgroundColor="0xffffff" borderVisible="false"
backgroundAlpha="1" horizontalCenter="1" textAlign="center">

<mx:Text id="text" fontSize="10" textAlign="center"
width="100%"/>

</s:BorderContainer>

I have tried everything to the text horizontalCenter and verticalCenter = 0 , 1 , middle , center also tried removing 100 % doing all sort of things online but just can't get it to center perfectly :) any help would be appreciated

Note: the text will be numbers like $19.99 or similar :)

2

There are 2 best solutions below

2
On

Can it help you?

<s:Group x="100" y="200">

    <s:Label  
        text="$19.99" 
        textAlign="center" 
        height="20" 
        width="55" 
        paddingTop="5" 
        paddingLeft="5" 
        paddingRight="5" 
        paddingBottom="5"/>

    <s:Rect width="100%" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="red"/>
        </s:stroke>
    </s:Rect>
</s:Group>

I have added a Rect to show you the real border.

0
On

What version of flex do you use? I've just tried your example(only replaced white background to red one to clearly see centering), and centering is perfectBorderContainer with mx:Text inside. 8px to left border and 8px to right border

I used flex 4.6. However, I may advise you to embed that font which you use with mx:Text - for many fonts text measuring is not correct until those fonts are embedded.