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
