Browse Source

Remove duplicate instructions regarding CenterContainer

JJ Hassan 6 years ago
parent
commit
66d6e29176
1 changed files with 9 additions and 8 deletions
  1. 9 8
      getting_started/step_by_step/ui_main_menu.rst

+ 9 - 8
getting_started/step_by_step/ui_main_menu.rst

@@ -204,8 +204,7 @@ need two containers as children of our ``HBoxContainer``: a
 
 In the node tree, select all the ``TextureRect`` nodes that should go on
 the left side: the logo, the menu options and the version note. Drag and
-drop them into the ``VBoxContainer``. Then, drag the illustration node
-into the ``CenterContainer``. The nodes should position automatically.
+drop them into the ``VBoxContainer``. The nodes should position automatically.
 
 .. figure:: img/ui_main_menu_containers_step_2.png
 
@@ -216,12 +215,14 @@ We're left with two problems to solve:
 1. The characters on the right aren't centered
 2. There's no space between the logo and the other UI elements
 
-To center the characters on the right, we'll use a ``CenterContainer``.  Add a
-``CenterContainer`` node as a child of the ``HBoxContainer``. Then in the
-Inspector, scroll down to the ``Size Flags`` category and click on the field to
-the right of the ``Vertical`` property, and check ``Expand`` in addition to ``Fill``. Do the same for
-the ``Horizontal`` property. Finally drag and drop the Characters into the
-``CenterContainer``. The Characters element will center automatically.
+To center the characters on the right, first select the ``CenterContainer``.
+Then in the Inspector, scroll down to the ``Size Flags`` category and click
+on the field to the right of the ``Vertical`` property, and check ``Expand``
+in addition to ``Fill``. Do the same for the ``Horizontal`` property. This
+makes the ``CenterContainer`` expand into all available space while
+respecting its neighbour ``VBoxContainer``. Finally, drag and drop the
+Characters node into the ``CenterContainer``. The Characters element will center
+automatically.
 
 .. figure:: img/ui_main_menu_containers_step_3.png