Alignment

The position of text on a page has a big impact on the page's usability. These lesson pages, for example, are aligned to the left. That means the left edge of all the text on the page forms a straight imaginary line that travels down the margin. Left alignment is the default setting for text in browsers. It's the most used because it's the easiest to read. However, some layouts benefit from different text alignment. Click through the tabs below to learn about different text alignment properties and their uses.

The text-align property controls the horizontal alignment of an element’s text. We can have our text aligned to the left of a page, or element, to the center, or to the right; or the text can be justified. Justified text is a layout option that instructs the text to fill the available space it occupies as evenly as possible. We often see this format in newsprint or editorial layouts to avoid unwanted whitespace.

left	center	right	justify
This is text set to align to the left.	This is text that is center-aligned.	This is text set to align to the right.	This is justified text. The text is spaced out so that the left and right margins line up.

<table>
  <tbody>
    <tr>
      <td style="text-align: left;">left</td>
      <td style="text-align: center;">center</td>
      <td style="text-align: right;">right</td>
      <td style="text-align: justify;">justify</td>
    </tr>
    <tr>
      <td style="text-align: left;">This is text set to align to the left.</td>
      <td style="text-align: center;">This is text that is center-aligned.</td>
      <td style="text-align: right;">This is text set to align to the right.</td>
      <td style="text-align: justify;">This is justified text. The text is spaced 
      out so that the left and right margins line up.</td>
    </tr>
  </tbody>
</table>

Left-aligned text should generally be used for any text that spans more than one line. This is due to accessibility standards of readability. When text is left aligned, users are able to scan text in a predictable manner because the starting point is always the same. If you have a large body of text that is center- or right-aligned, the user's eye has to refocus to find the starting point of each line of text. This slows down the reading process and often frustrates the user.

When you want to position text vertically on a page, you use the vertical-align property. Much like text-align lines up the text's edge on the sides, vertical-align instructs text to align across the top, across the bottom, or through the middle of its containing element. The vertical-align property can get tricky because its behavior can change based on the default settings of a parent element.

Let's use vertical-align on table cells for this example. When you add text to a table cell and apply vertical-align to the <td> tag, all content inside the cell will align accordingly, whether to the top, bottom, or middle of the cell. Because table rows resize to fit the height of your content, if you have a row of cells that all have the same content height, adding a vertical-alignment value won't seem to make a difference. But if one cell in the row is taller than the other cells, you will see the effect.

top	middle	bottom
This text is set to align to the top of the cell.	This text is set to align to the middle of the cell.	This is text set to align to the bottom of the cell.

top	middle	bottom
This is a larger entry of text that is set to align to the top of the cell. It'll help better demonstrate the difference between the vertical-align values.	This text is set to align to the middle of the cell.	This is text set to align to the bottom of the cell.

<table>
  <tbody>
    <tr style="text-align: center;">
      <td>top</td>
      <td>middle</td>
      <td>bottom</td>
    </tr>
    <tr style="text-align: left;">
      <td style="vertical-align: top;">This is a larger entry of 
      text that is set to align to the top of the cell. It'll help 
      better demonstrate the difference between the vertical-align 
      values.</td>
      <td style="vertical-align: middle;">This text is set to align 
      to the middle of the cell.</td>
      <td style="vertical-align: bottom;">This is text set to align 
      to the bottom of the cell.</td>
    </tr>
  </tbody>
</table>

The use of the vertical-align property works best when there are child elements of differing sizes that should be aligned for better page flow and readability. Tables are the most common use of this property. We will explore more uses for it as we delve into full page layouts in a later lesson.

Paragraphs and headers can be more mysterious when it comes to vertical alignment. With these elements, the height of a line is dictated by the tallest item, which determines the line-height. So, if you have a 100px font in the middle of a line of 24px font, the line height will adjust to accommodate the larger font.

Setting the value of the vertical-align property to either “top” or “bottom” on a span or image will align everything in that line to the top or bottom of the line's height. Using the value “middle” is a bit stranger, though.

The “middle” value is based on the middle of a line's x-height, which is the default location and size of a lowercase “x” for that element. Given this approach, if you want every element in a line to vertically align at the middle, you need to apply the property to each of them. Let's use the following text to illustrate this situation.

Original font size. Bigger font. Biggest font.

This visual indicates the location of the x-height and the height of the line.

This version shows what happens when the vertical-align:middle; property is set to the biggest font. Notice how the biggest font moved the line to center itself around the x-height. The bigger font in the middle is still not centered.

This version shows the vertical-align:middle; property applied to all three spans of text. Notice how all three are now vertically centered around the x-height.

Tip: You can override the inherent line height by setting your own. This approach may help maintain consistency and provide a sense of predictability in the behavior of these property values.

<p style="text-align: center; line-height: 20px;">
Original font size. 
<span style="font-size: 1.75em;">Bigger font.</span> 
<span style="font-size:2.5em;">Biggest font.</span></p>

Original font size. Bigger font. Biggest font.

<p style="text-align: center; line-height: 60px;">
Original font size. 
<span style="font-size: 1.75em;">Bigger font.</span> 
<span style="font-size:2.5em;">Biggest font.</span></p>

Original font size. Bigger font. Biggest font.

The vertical-align property is also responsible for setting text as superscript or subscript, meaning slightly above or slightly below the normal flow of text, respectively. These are useful for situations involving math or footnotes. These can be implemented with the values “super” and “sub”.

x2 = x1 + y2

<p>x<span style="vertical-align:sub;">2</span> 
= x<span style="vertical-align:sub;">1</span> 
+ y<span style="vertical-align:super;">2</span></p>

Note: You can also use the <sup></sup> and <sub></sub> tags to achieve the same result and simplify your code!

x₂ = x₁ + y²

<p>x<sub>2</sub> = x<sub>1</sub> + y<sup>2</sup></p>

Using your own text editor or the coding space below, create some basic layouts and apply what you've learned. Use the text-align and vertical-align properties in conjunction with font-size and font-family properties to see how they interact.

Lining up your elements is an important factor in making an appealing layout.

You Try!