Closed
Description
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
We should correct this so that new users of Bevy to learn our tools correctly.
Ref: #5513 (comment)
Suggested fix
- Look through all examples for nodes with auto-margin
- Determine if they have auto margin in order to achieve centering
- If yes, replace it with the correct setup of the parent node (
AlignItems::Center
,JustifyContent::Center
)