diff --git a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 99e1ec92d05..a18136f18d1 100644 --- a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1476,7 +1476,9 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis() item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after; break; case CSS::AlignItems::Center: - item.cross_offset = -(item.cross_size.value() / 2); + // https://drafts.csswg.org/css-flexbox/#align-items-property + // The flex item’s margin box is centered in the cross axis within the line + item.cross_offset = (-item.cross_size.value() + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after) / 2; break; default: break; diff --git a/Tests/LibWeb/Layout/expected/flex/align-center-margin.txt b/Tests/LibWeb/Layout/expected/flex/align-center-margin.txt new file mode 100644 index 00000000000..8c6aaf1bbd4 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/align-center-margin.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x216 [BFC] children: not-inline + Box at (8,8) content-size 784x200 flex-container(row) [FFC] children: not-inline + BlockContainer
at (8,58) content-size 100x100 flex-item [BFC] children: not-inline + BlockContainer at (108,108) content-size 100x100 flex-item [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x216] + PaintableBox (Box) [8,8 784x200] + PaintableWithLines (BlockContainer
) [8,58 100x100] + PaintableWithLines (BlockContainer) [108,108 100x100] diff --git a/Tests/LibWeb/Layout/input/flex/align-center-margin.html b/Tests/LibWeb/Layout/input/flex/align-center-margin.html new file mode 100644 index 00000000000..6a3c27d372a --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/align-center-margin.html @@ -0,0 +1,17 @@ +
\ No newline at end of file