Webflow Alignment Explained: Text, Flexbox and Responsive Layouts

Updated 12 September 2026.

In this guide

• Identify what you are aligning before changing a setting.
• Flex alignment follows the main and cross axes, not fixed horizontal and vertical labels.
• A centred container does not automatically centre its text.

Start by naming the object

“Centre this section” can mean several things: centre the paragraph’s lines, centre the content wrapper within the page, or centre a group of buttons inside the wrapper. Each has a different owner.

Select the actual object you want to move, then inspect its parent. A text alignment control affects inline content; it does not automatically position an entire block. Before changing classes, describe the desired result precisely. This avoids fixing the wrong level of the layout.

Read the axes before choosing a value

In Flexbox, justify-content distributes items along the main axis and align-items aligns them on the cross axis. A row and a column therefore interpret the axes differently. The MDN Flexbox guide explains the underlying model.

Look at the parent’s direction before changing an alignment value. Also check whether it has available space: distributing children inside a wrapper that exactly fits them may produce no visible difference. A fixed child width can make an apparently correct setting look wrong.

Which setting owns the alignment?What should move?Inspect firstTypical controlLines inside a paragraphText element or inherited text styletext-alignChildren along a flex rowFlex parent and available widthjustify-contentChildren across the flex axisFlex parent and child dimensionsalign-itemsOne exceptional flex childThe specific childalign-selfA width-limited page containerContainer width and marginsMaximum width and auto side margins

Distinguish the wrapper from its content

A page-width container controls the section’s relationship to the page edges. A content wrapper controls the arrangement of the heading, paragraph and actions. The paragraph itself may need a readable maximum width.

For a centred hero, you may need all three decisions: a centred outer container, a column wrapper that centres its children and centred text. For an editorial section, a centred outer container can still contain left-aligned text. These are different patterns, not conflicting rules.

Practical takeaway: Find the element that owns the layout before adding another alignment override.

Recheck the layout when it stacks

Suppose a row of cards becomes a column on a narrower screen. Revisit the axis-dependent alignment rules rather than assuming their visual effect remains the same. Inspect child widths, margins and the text alignment too.

Test at intermediate widths, with long content and with one fewer card. The layout should adapt to the content instead of depending on the exact number of items in the design mockup. Keep overrides at the level that owns the change and document exceptions.

Use a diagnosis order

When an element appears misaligned, inspect the parent’s display and direction first. Then check dimensions, alignment settings and child overrides. Finally inspect margins and inherited text styles. Change one relevant rule and observe the result.

This article uses “alignment” for the layout behaviour, not a separate native string-variable feature. For a complete build exercise, follow the companion responsive hero tutorial. Keeping the explanation and exercise separate gives each page a distinct purpose.

A related YAVACADO project

The Fiscal Agency project required translating Figma Auto Layout into responsive Webflow layouts while preserving spacing and typography. It shows why layout relationships matter when moving between tools: matching a reference depends on understanding the structure behind the image.

View project: The Fiscal Agency

Your next check

Mark each item as you check it. Ticks last for this page visit.

Identify the object and its parent.Read the current flex direction.Check available space and child dimensions.Re-test alignment after the layout stacks.

Put it into practice

Why is centred text not moving the button?

The paragraph’s text alignment does not position a neighbouring button block. Inspect their shared parent and use the appropriate layout control there. Then set text alignment separately if needed.

Continue with a related guide

• Webflow Alignment Tutorial: Build a Responsive Hero with Flexbox
• Webflow Variable Modes: Create a Theme You Can Maintain

Official references

• MDN: Flexbox fundamentals
• MDN: align-items

Discuss your website

Resolve responsive layout problems at the level that actually controls them.

Explore Webflow development or tell us about your project.