Skip to main content

Text Align

Set the horizontal alignment of text.

View as Markdown
baselinewidely
ClassCSS
ta:ctext-align: center;
ta:etext-align: end;
ta:jtext-align: justify;
ta:jatext-align: justify-all;
ta:ltext-align: left;
ta:mptext-align: match-parent;
ta:rtext-align: right;
ta:stext-align: start;

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:ta:l.

Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

@xs:ta:lFrom 32rem up.
@sm:ta:lFrom 40rem up.
@md:ta:lFrom 48rem up.
@lg:ta:lFrom 64rem up.
@xl:ta:lFrom 80rem up.
@xxl:ta:lFrom 96rem up.

Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

@c:xs:ta:lContainer from 32rem up.
@c:sm:ta:lContainer from 40rem up.
@c:md:ta:lContainer from 48rem up.
@c:lg:ta:lContainer from 64rem up.
@c:xl:ta:lContainer from 80rem up.
@c:xxl:ta:lContainer from 96rem up.

Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

@pc:ta:lOn a touch screen.
@prm:ta:lWith reduced motion on.
@st:ta:lOn the first frame.

States

Apply a class only while the element is in a state, such as hovered, focused or checked.

h:ta:lOn :hover.
f:ta:lOn :focus.
fv:ta:lOn :focus-visible.
a:ta:lOn :active.
d:ta:lOn :disabled.
fc:ta:lOn :first-child.
c:ta:lOn :checked.
e:ta:lOn :empty.
fw:ta:lOn :focus-within.
i:ta:lOn :invalid.
in:ta:lOn :indeterminate.
lc:ta:lOn :last-child.
nc:ta:lOn :nth-child.
r:ta:lOn :required.
ro:ta:lOn :read-only.
v:ta:lOn :valid.

Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

a::ta:lOn ::after.
b::ta:lOn ::before.
p::ta:lOn ::placeholder.
s::ta:lOn ::selection.