align

sandbox/align.css

@@ -1,19 +1,39 @@
 
+
 Screen {
     layout: horizontal;
     
 }
 
-Widget#thing {
+Widget {
+    margin:1;
+}
+
+#thing {
     width: 20;
     height: 10;
-    align: center middle;
+    
+    background:magenta;
+    margin: 1;
+    padding: 1;
+    /* border: solid white; */
+    align-vertical: middle;    
 }
 
 
-Widget#thing2 {
-    width: 30;
-    height: 8;
-    align: center middle;
-    background: green;
-}
+#thing2 {
+    width: 20;
+    height: 10;
+    
+    background:green;
+    align-vertical: middle;
+}
+
+
+#thing3 {
+    width: 20;
+    height: 10;
+    
+    background:blue;
+    align-vertical: bottom;
+}

sandbox/align.py

@@ -1,14 +1,21 @@
+from rich.text import Text
+
 from textual.app import App
 from textual.widget import Widget
 
 
+class Thing(Widget):
+    def render(self):
+        return Text.from_markup("Hello, World. [b magenta]Lorem impsum.")
+
+
 class AlignApp(App):
     def on_load(self):
         self.bind("t", "log_tree")
 
     def on_mount(self) -> None:
         self.log("MOUNTED")
-        self.mount(thing=Widget(), thing2=Widget())
+        self.mount(thing=Thing(), thing2=Widget(), thing3=Widget())
 
     def action_log_tree(self):
         self.log(self.screen.tree)

sandbox/basic.css

@@ -21,6 +21,7 @@ App > Screen {
   color: $text-background;
 }
 
+
 #sidebar {
   color: $text-primary;
   background: $primary;
@@ -81,7 +82,8 @@ Tweet {
   /* border: outer $primary; */
   padding: 1;
   border: wide $panel-darken-2;
-  overflow-y: scroll
+  overflow-y: scroll; 
+  align-horizontal: center;
 }
 
 
@@ -168,6 +170,7 @@ Error {
   margin: 1 3;
   
   text-style: bold;
+  align-horizontal: center;
 }
 
 Warning {
@@ -179,6 +182,7 @@ Warning {
   border-bottom: hkey $warning-darken-2; 
   margin: 1 2;
   text-style: bold;
+  align-horizontal: center;
 }
 
 Success {
@@ -190,4 +194,5 @@ Success {
   border-bottom: hkey $success; 
   margin: 1 2;
   text-style: bold;
+  align-horizontal: center;
 }