From fed11e50f9b3d36ed45da9b38ab0dec27d8c8e3f Mon Sep 17 00:00:00 2001
From: Dave Pearson <davep@davep.org>
Date: Tue, 7 Mar 2023 10:16:51 +0000
Subject: [PATCH 1/2] Extend the centering Q in the FAQ

Add an example of how to center multiple widgets, rather than center the
bounding box of multiple widgets.
---
 FAQ.md                                    | 68 ++++++++++++++++++++++
 questions/align-center-middle.question.md | 71 +++++++++++++++++++++++
 2 files changed, 139 insertions(+)

diff --git a/FAQ.md b/FAQ.md
index 239d53570..d2563e9fc 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -70,6 +70,74 @@ if __name__ == "__main__":
     ButtonApp().run()
 ```
 
+If you use the above on multiple widgets, you'll find they appear to
+"left-align" in the center of the screen, like this:
+
+```
++-----+
+|     |
++-----+
+
++---------+
+|         |
++---------+
+
++---------------+
+|               |
++---------------+
+```
+
+If you want them more like this:
+
+```
+     +-----+
+     |     |
+     +-----+
+
+   +---------+
+   |         |
+   +---------+
+
++---------------+
+|               |
++---------------+
+```
+
+the best approach is to wrap each widget in a container that individually
+centers it. For example:
+
+```python
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Button
+
+class Center( Container ):
+    DEFAULT_CSS = """
+    Center {
+        height: auto;
+        width: 100%;
+        align: center middle;
+    }
+    """
+
+class ButtonApp(App):
+
+    CSS = """
+    Screen {
+        align: center middle;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Center(Button("PUSH ME!"))
+        yield Center(Button("AND ME!"))
+        yield Center(Button("ALSO PLEASE PUSH ME!"))
+        yield Center(Button("HEY ME ALSO!!"))
+
+if __name__ == "__main__":
+    ButtonApp().run()
+```
+
 <a name="how-do-i-pass-arguments-to-an-app"></a>
 ## How do I pass arguments to an app?
 
diff --git a/questions/align-center-middle.question.md b/questions/align-center-middle.question.md
index 696840424..176ca52a7 100644
--- a/questions/align-center-middle.question.md
+++ b/questions/align-center-middle.question.md
@@ -2,8 +2,11 @@
 title: "How do I center a widget in a screen?"
 alt_titles:
   - "centre a widget"
+  - "centre a widgets"
   - "center a control"
   - "centre a control"
+  - "center controls"
+  - "centre controls"
 ---
 
 To center a widget within a container use
@@ -32,3 +35,71 @@ class ButtonApp(App):
 if __name__ == "__main__":
     ButtonApp().run()
 ```
+
+If you use the above on multiple widgets, you'll find they appear to
+"left-align" in the center of the screen, like this:
+
+```
++-----+
+|     |
++-----+
+
++---------+
+|         |
++---------+
+
++---------------+
+|               |
++---------------+
+```
+
+If you want them more like this:
+
+```
+     +-----+
+     |     |
+     +-----+
+
+   +---------+
+   |         |
+   +---------+
+
++---------------+
+|               |
++---------------+
+```
+
+the best approach is to wrap each widget in a container that individually
+centers it. For example:
+
+```python
+from textual.app import App, ComposeResult
+from textual.containers import Container
+from textual.widgets import Button
+
+class Center( Container ):
+    DEFAULT_CSS = """
+    Center {
+        height: auto;
+        width: 100%;
+        align: center middle;
+    }
+    """
+
+class ButtonApp(App):
+
+    CSS = """
+    Screen {
+        align: center middle;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        yield Center(Button("PUSH ME!"))
+        yield Center(Button("AND ME!"))
+        yield Center(Button("ALSO PLEASE PUSH ME!"))
+        yield Center(Button("HEY ME ALSO!!"))
+
+if __name__ == "__main__":
+    ButtonApp().run()
+```

From 93a974b3886572c715132efebcdae67cf1d86e99 Mon Sep 17 00:00:00 2001
From: Dave Pearson <davep.org@gmail.com>
Date: Tue, 7 Mar 2023 10:46:01 +0000
Subject: [PATCH 2/2] Fix a typo

Co-authored-by: darrenburns <darrenburns@users.noreply.github.com>
---
 questions/align-center-middle.question.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/questions/align-center-middle.question.md b/questions/align-center-middle.question.md
index 176ca52a7..ee318dc0d 100644
--- a/questions/align-center-middle.question.md
+++ b/questions/align-center-middle.question.md
@@ -2,7 +2,7 @@
 title: "How do I center a widget in a screen?"
 alt_titles:
   - "centre a widget"
-  - "centre a widgets"
+  - "centre widgets"
   - "center a control"
   - "centre a control"
   - "center controls"