How do I horizontally center a FlexLayout inside a StackLayout?

user_11809808 0
Viewed 188

I have a FlexLayout inside of a StackLayout:

<StackLayout HorizontalOptions="Center" Padding="0,100">
    <Label
        Text="Franklin"
        HorizontalTextAlignment="Center"
        FontSize="Large" />
    <Label Text="Mostly Cloudy" HorizontalTextAlignment="Center" />
    <Label
        Text="55°"
        HorizontalTextAlignment="Center"
        FontSize="Header" />

    <!-- PLEASE CENTER ME -->
    <FlexLayout>
        <Label Text="H:55°" Margin="0,0,10,0" />
        <Label Text="L:37°" />
    </FlexLayout>

</StackLayout>

FlexLayout inside a StackLayout

How do I center the FlexLayout inside the StackLayout?

xamarin.forms xamarin xaml
2 Answers

I recommend using a StackLayout in the horizontal orientation. A StackLayout gives the more natural flow of placing the elements in the page.

<!-- This part is now centered -->
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
    <Label Text="H:55°" Padding="5,0" />
    <Label Text="L:37°" Padding="5,0" />
</StackLayout>
user_52694690

Wrap the FlexLayout in an AbsoluteLayout:

<!-- This part is now centered -->
<AbsoluteLayout HorizontalOptions="CenterAndExpand">
    <FlexLayout>
        <Label Text="H:55°" Padding="5,0" />
        <Label Text="L:37°" Padding="5,0" />
    </FlexLayout>
</AbsoluteLayout>

FlexLayout centered in StackLayout

Note that I split your margin on the first label into padding between the two labels so that they would be centered inside the FlexLayout.

user_118098080
Related