Fix image centering in normal and responsive layouts

src/Content/StyleCompiler.php

@@ -97,12 +97,15 @@ final class StyleCompiler
     public function compileDocument(array $document): string
     {
         $css = '';
-        $walk = function (array $blocks) use (&$walk, &$css): void {
+        $walk = function (array $blocks, array $parent = []) use (&$walk, &$css): void {
             foreach ($blocks as $block) {
                 if (is_array($block['style'] ?? null) && 1 === preg_match('/^[a-zA-Z0-9_-]{1,64}$/D', (string) ($block['id'] ?? ''))) {
                     $css .= $this->compileBlock((string) $block['id'], $block['style']);
+                    if ('image' === ($block['type'] ?? null)) {
+                        $css .= $this->imageAlignment((string) $block['id'], $block['style'], $parent);
+                    }
                 }
-                $walk($block['children'] ?? []);
+                $walk($block['children'] ?? [], $block);
             }
         };
         $walk($document['blocks'] ?? []);
@@ -110,6 +113,50 @@ final class StyleCompiler
         return $css;
     }
 
+    /**
+     * In a normal section/column, align-self cannot position a figure. Align its box
+     * and the possibly smaller image inside it, including linked images. A horizontal
+     * flex group must keep align-self's vertical axis without consuming its main-axis
+     * space with automatic margins. Resolve both styles at each breakpoint so a parent
+     * layout change or "auto" on a phone cannot leave desktop alignment behind.
+     */
+    private function imageAlignment(string $id, array $style, array $parent): string
+    {
+        $css = $previous = '';
+        $values = $group = [];
+        // These block types render children in an unstyled inner wrapper.
+        $wrapped = in_array($parent['type'] ?? '', ['section', 'accordionitem', 'slider'], true);
+        foreach (['desktop', 'tablet', 'mobile'] as $device) {
+            $values = array_replace_recursive($values, $style[$device] ?? []);
+            $group = array_replace_recursive($group, $parent['style'][$device] ?? []);
+            if (!isset($values['alignSelf'])) {
+                continue;
+            }
+            $alignment = match ($values['alignSelf']) {
+                'center' => ['auto', 'auto', 'center'],
+                'flex-start' => ['0', 'auto', 'start'],
+                'flex-end' => ['auto', '0', 'end'],
+                default => null,
+            };
+            $horizontalFlex = !$wrapped
+                && in_array($group['display'] ?? '', ['flex', 'inline-flex'], true)
+                && in_array($group['flexDirection'] ?? 'row', ['row', 'row-reverse'], true);
+            [$left, $right, $justify] = $horizontalFlex || null === $alignment
+                ? [$values['margin']['left'] ?? '0', $values['margin']['right'] ?? '0', 'auto']
+                : $alignment;
+            $rules = sprintf('#%s{margin-left:%s;margin-right:%s;justify-self:%s}#%s img{margin-left:%s;margin-right:%s}',
+                $id, $left, $right, $justify, $id, $alignment[0] ?? '0', $alignment[1] ?? '0');
+            if ($rules !== $previous) {
+                $css .= isset(self::BREAKPOINTS[$device])
+                    ? sprintf('@media (max-width:%dpx){%s}', self::BREAKPOINTS[$device], $rules)
+                    : $rules;
+                $previous = $rules;
+            }
+        }
+
+        return $css;
+    }
+
     private function compileBlock(string $id, array $style): string
     {
         $css = '';