Alignment

Alignment is the most basic way to make an interface look neat. Related elements should line up on the same line: form labels align with the left edge of their inputs, text and images in a card share an edge, numbers in a table are right-aligned so they're easy to compare, and icons are vertically centered with the text next to them.

In CSS, horizontal text alignment uses text-align. Aligning block elements is usually left to Flex or Grid: justify-content handles the main direction and align-items handles the cross direction. Give the parent display: flex and set both properties to center, and you have the most common way to center something horizontally and vertically.

Use left alignment for large blocks of content, since it matches how people read. Centering only suits small amounts of content, like short headings, empty states, and login boxes. Too many alignment styles on one page looks messy.