And one more thing: if we see enough demand, we'd probably just create a
CenteringLayout or something like that is specifically designed to center
a child.
<js:Container width=„100%“ height=„100%“>
<js:beads>
<js:CenteringLayout />
</js:beads>
<js:Container width=„150“ height=„150“>
<js:Label text="Hello World“/>
</js:Container>
</js:Container>
And even:
<js:CenteringContainer width=„100%“ height=„100%“>
<js:Container width=„150“ height=„150“>
<js:Label text="Hello World“/>
</js:Container>
</js:CenteringContainer>
-Alex
On 12/9/15, 12:46 PM, "Alex Harui" <[email protected]> wrote:
>
>
>On 12/9/15, 11:07 AM, "Marcus Fritze" <[email protected]>
>wrote:
>
>>Hi,
>>
>>I started playing around a little bit with FlexJS. Is it possible to
>>align a container in the vertical middle / horizontal center, like in
>>FlexSDK.
>>
>>Something like:
>>
>><js:Container width=„100%“ height=„100%“ verticalAlign=„middle“
>>horizontalAlign=„center">
>>
>> <js:Container width=„150“ height=„150“>
>> <js:Label text="Hello World“/>
>> </js:Container>
>>
>></js:Container>
>>
>>So the sub-Container should be located in the center middle of the top
>>Container.
>>
>
>In the JS output, we want to use as much default browser behavior as
>possible so when folks fool around with their CSS, it does what is
>expected.
>
>There is no CSS style called horizontalCenter, so that property isn't
>currently supported in BasicLayout, which is the default layout for
>Container. Instead, you can use margin-left="auto" and
>margin-right="auto" to center a child. And remember, the margins go on
>the child, it isn't a command for the parent layout. So it would look
>like:
>
><js:Container width=„100%“ height=„100%“>
> <js:Container width=„150“ height=„150“
>style="marginLeft:auto;marginRight:auto">
> <js:Label text="Hello World“/>
> </js:Container>
></js:Container>
>
>It turns out that verticalAlign is not supported on non-inline elements.
>If you choose HorizontalLayout, verticalAlign should work.
>
>A fancier absolute layout could implement verticalAlign and
>HorizontalCenter, but it will run more code on the JS side and thus be
>fatter and slower. We'll probably build one in order to make a component
>set that is more like Spark, but we don't have one now.
>
>
>HTH,
>-Alex
>
