Vertical alignment

When you use vertical alignment, the image is placed on the left-hand-side and the text is placed on the right-hand-side. With the vertical alignment, there are three possible alignment values that are accepted in all versions of HTML and those are: bottom (default), middle, and top. With the align property set to bottom, text aligns with the bottom of the image. When the image align property set to middle, text is aligned with the middle of the image. The text is aligned to the top of the image when the image align property is set to top. Figure 1 shows the effects for each of these possible alignment values.

Figure 1 Effects of Vertical Align Property
HTML This is an example of bottom alignment. It is the default alignment.
HTML This is an example of middle alignment. To use this property, set align="middle" inside the <img> tag.
HTML This is an example of top alignment. To use this property, set align="top" inside the <img> tag.

As the examples in the figure 1 show, use of vertical alignment can be useful only if you a one line of text to go with the image or if your image is as small as the size of the text line. Table 1 shows the necessary code for each alignment property shown in figure 1.

Table 1 HTML Code for the output shown in Figure 1
Vertical Alignment
HTML code
bottom <img src="http://www.scriptingmaster.com/images/html/HTML.gif" width="133" height="36" align="bottom"> This is an example of bottom alignment. It is the default alignment.
middle <img src="http://www.scriptingmaster.com/images/html/HTML.gif" width="133" height="36" align="middle"> This is an example of middle alignment. To use this property, set align="middle" inside the <img> tag.
top <img src="http://www.scriptingmaster.com/images/html/HTML.gif" width="133" height="36" align="top"> This is an example of top alignment. To use this property, set align="top" inside the <img> tag.