06. Text Alignment

Horizontal Alignment

The text-align property allows you to align text. The values can be left,right,center, andjustify.

This paragraph is aligned center.

This is a paragraph that is aligned right. See how the text aligns to the right side of the containing element?

This is a paragraph that is aligned left. Notice that the text aligns to the left side of the containing element.

Justify means that every line in a paragraph (except for the last) is to take up the full width of a box, much like this paragraph here. In order to make this work, the spacing between words may be adjusted.

Vertical Alignment

To control where an inline-element should appear, we can use the vertical-align property. Some common inline-elements are:<img><em> or <strong>.

Here are a list of inline element options you can use:

baseline
Start at the baseline.
sub
Subscript.
super
Superscript.
top
Top of the element is aligned with top of tallest element on the line.
text-top
Top of element is aligned with top of parent element's font.
middle
Start at middle of parent's element.
bottom
Bottom of the element is aligned with the lowest element on the line.
text-bottom
Bottom of element is aligned with bottom of parent element's font.

Indentation

To control the indentation, we use the text-indent property. It's common to use pixels or ems for the units. If we want to pull back the line, we can use a negative value.

Build modern and responsive webpages

High Performance Web Sites

Build modern and responsive webpages Try Front-end

Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.

$ Check price
29.9929.99Amazon 4.5 logo(63+ reviews)

More Front-end resources

Aching back from coding all day?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ reviews)

More Back Problems resources

Ad