Text Align

Whether the text in the column lines up on the left, the right, the centre, or both edges.

Where to find it
Labelled Typography → Align in the "Selected Column" section of the Modify drawer.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
Underlying CSS
textAlign

In plain English

Text align decides which edge the lines of text line up against. Left-aligned is the default for English and the easiest to read, because the eye always knows exactly where the next line starts.

Centred text has no such anchor, so every line begins in a different place. That is fine for a heading or a short caption and tiring for a paragraph. Right-aligned is rare in English and mostly used for numbers in a table.

Justified stretches each line so both edges are flush, like a newspaper column. On a printed page with fine hyphenation this looks excellent; in a browser, which hyphenates poorly, it tends to open ugly rivers of white space through the paragraph.

Note that this aligns the text inside the column. To move the whole column within its row, use the row's Horizontal Alignment instead.

What each option does

OptionWhat you will see
leftLines start at the left edge. The default and the most readable for English.
centerLines are centred. Good for headings and short captions, tiring for paragraphs.
rightLines end at the right edge. Mostly for figures in a table.
justifyBoth edges flush, with word spacing stretched to fit. Can leave gaps in narrow columns.
startLike left in English, but follows the reading direction of the language — so it becomes right in Arabic or Hebrew.
endLike right in English, but follows the reading direction of the language.

When you would use it

  • A hero heading or a short caption should be centred.
  • A column of numbers should line up on the right.
  • You are building for a right-to-left language and want alignment to follow it: use "start" and "end".

How to change it

  1. Select the column, open "Selected Column", then "Typography", then "Align".
  2. Pick a value from the dropdown.
  3. If you meant to move the column itself rather than the text in it, use the row's Horizontal Alignment.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Centring a paragraph of more than two or three lines makes it measurably slower to read.
  • Justified text in a narrow column produces large word gaps. Widen the column or choose left.
  • This setting moves the text, not the box. A centred column is a row-level setting.

Related settings

For developers

The technical reference for what this setting produces: MDN: text-align. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next