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.

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Build modern and responsive webpages

Responsive Typography

Build modern and responsive webpages Try Front-end

Responsive web design helps your site maintain its design integrity on a variety of screen sizes, but how does it affect your typography? With this practical book, graphic designers, web designers, and front-end developers alike will learn the nuts and bolts of how to get the best appearance from type without sacrificing performance on any device.

$ Check price
24.9924.99Amazon 4.5 logo(3+ reviews)

More Front-end resources

Ad