Skip to content

Stop using auto-margin to center UI elements in our examples #6498

Closed
@Weibye

Description

@Weibye

Bevy version

Current main

Description

At several locations throughout our examples we use the old css-hack of setting margin: auto on an element that should be centered in order to make it center on the screen. This is incorrect and can lead to hard-to-understand behaviour with sibling-nodes.
The correct way to center elements on the page is to set the following properties on the parent node:

  • AlignItems::Center
  • JustifyContent::Center

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#properties_that_control_alignment

We should correct this so that new users of Bevy to learn our tools correctly.

Ref: #5513 (comment)

Suggested fix

  1. Look through all examples for nodes with auto-margin
  2. Determine if they have auto margin in order to achieve centering
  3. If yes, replace it with the correct setup of the parent node (AlignItems::Center, JustifyContent::Center)

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-UIGraphical user interfaces, styles, layouts, and widgetsC-BugAn unexpected or incorrect behaviorC-Code-QualityA section of code that is hard to understand or changeC-ExamplesAn addition or correction to our examplesD-TrivialNice and easy! A great choice to get started with Bevy

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions