Improve text-align example.

Replace statics with labels; change to a 2 x 2 grid layout to make it easier to see the difference between 'center' and 'justify'; increase readability by setting 'color: auto' in the labels.

docs/examples/styles/text_align.css

@@ -1,7 +1,6 @@
 #one {
     text-align: left;
     background: lightblue;
-
 }
 
 #two {
@@ -19,6 +18,12 @@
     background: palevioletred;
 }
 
-Static {
+Label {
-  padding: 1;
+    padding: 1 2;
+    height: 100%;
+    color: auto;
+}
+
+Grid {
+    grid-size: 2 2;
 }

docs/examples/styles/text_align.py

@@ -1,7 +1,6 @@
-from __future__ import annotations
+from textual.app import App
-
+from textual.containers import Grid
-from textual.app import App, ComposeResult
+from textual.widgets import Label
-from textual.widgets import Static
 
 TEXT = (
     "I must not fear. Fear is the mind-killer. Fear is the little-death that "
@@ -11,18 +10,13 @@ TEXT = (
 
 
 class TextAlign(App):
-    def compose(self) -> ComposeResult:
+    def compose(self):
-        left = Static("[b]Left aligned[/]\n" + TEXT, id="one")
+        yield Grid(
-        yield left
+            Label("[b]Left aligned[/]\n" + TEXT, id="one"),
-
+            Label("[b]Center aligned[/]\n" + TEXT, id="two"),
-        right = Static("[b]Center aligned[/]\n" + TEXT, id="two")
+            Label("[b]Right aligned[/]\n" + TEXT, id="three"),
-        yield right
+            Label("[b]Justified[/]\n" + TEXT, id="four"),
-
+        )
-        center = Static("[b]Right aligned[/]\n" + TEXT, id="three")
-        yield center
-
-        full = Static("[b]Justified[/]\n" + TEXT, id="four")
-        yield full
 
 
 app = TextAlign(css_path="text_align.css")

docs/styles/text_align.md

@@ -35,7 +35,7 @@ This example shows, from top to bottom: `left`, `center`, `right`, and `justify`
 
 === "text_align.css"
 
-    ```css
+    ```css hl_lines="2 7 12 17"
     --8<-- "docs/examples/styles/text_align.css"
     ```