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?

Self-Massage Tool

Aching back from coding all day? Try Back Problems

Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.

$ Check price
29.9529.95Amazon 4.5 logo(3,443+ reviews)

More Back Problems resources

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

Ad