Aligning Elements Vertically

You can align elements in many different ways to make them look neater on the page.

To position elements vertically:

Type vertical-align:

Type baseline to align the element's baseline with the parent's baseline.

Or type middle to align the middle of the element with the middle of the parent.

Or type sub to position the element as a subscript of the parent.

Or type super to position the element as a superscript of the parent.

Or type text-top to align the top of the element with the top of the parent.

Or type text-bottom to align the bottom of the element with the bottom of the parent.

Or type top to align the top of the element with the top of the tallest element on the line.

Or type bottom to align the bottom of the element to the bottom of the lowest element on the line.

Figure 11.56. Images are aligned by default to the bottom of the line.

Or type a percentage of the line height of the element, which may be positive or negative.

Figure 11.56. Images are aligned by default to the bottom of the line.

Figure 11.57. Notice that the alignment is set on the images themselves, not on the paragraph.

Figure 11.58. Now the images are aligned to the middle of the line.