Help render text center aligned

Developers
1

Hello.
Im developing an app and i would like it to display on the first column 3 icons (onde for each row), and in the second row i would like to display text center aligned.
I can almost do it, but the text is always left aligned. Can anyone help me?

My code:

col1 = render.Column(
            expanded= True,
            main_align="space_between",
            cross_align="center",  
            children=[
                render.Image(src=ISS_IMG),
                render.Image(src=MAG_IMG),
                render.Image(src=EYE_IMG),
           ],
        )
        
        col2 = render.Column(
            expanded= True,
            main_align="center",
            cross_align="center",  
            children=[
                render.Text("%s" % time_human_readable, color="#FF0000", font="tb-8"),
                render.Text("%s" % start_compass, color="#FFFFFF", font= "tb-8"),
                render.Text("%s" % magnitude, color="#FFFF00", font = "tb-8"),

            ],
        )

        return render.Root(
            child=render.Row(
                children=[
                    col1,
                    col2
                ],
            ),
        )
2

I recommend setting main_align = "space_between" in both columns.

Then, if you add a Box widget as the parent of col2 and give it a width you may achieve what you want:

return render.Root(
  child = render.Row(
    main_align = "center",
    cross_align = "center",
    children = [
      col1,
      render.Box(child = col2, width = 56),
    ],
  ),
)

Result:
image

1 Like
3

Perfect. Solved my problem.

Thank you