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?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

Ad