flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: [FlexJS] Container horizontalAlign="center" / verticalAlign="middle" possible
Date Wed, 09 Dec 2015 21:07:17 GMT
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:CenteringLayout />
  <js:Container width=„150“ height=„150“>
    <js:Label text="Hello World“/>

And even:

<js:CenteringContainer width=„100%“ height=„100%“>
  <js:Container width=„150“ height=„150“>
    <js:Label text="Hello World“/>


On 12/9/15, 12:46 PM, "Alex Harui" <aharui@adobe.com> wrote:

>On 12/9/15, 11:07 AM, "Marcus Fritze" <marcus.fritze@googlemail.com>
>>I started playing around a little bit with FlexJS. Is it possible to
>>align a container in the vertical middle / horizontal center, like in
>>Something like:
>><js:Container width=„100%“ height=„100%“ verticalAlign=„middle“
>>	<js:Container width=„150“ height=„150“>
>>		<js:Label text="Hello World“/>
>>	</js:Container>
>>So the sub-Container should be located in the center middle of the top
>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
>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
><js:Container width=„100%“ height=„100%“>
>    <js:Container width=„150“ height=„150“
>        <js:Label text="Hello World“/>
>    </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.

View raw message