Alignment of Images in HTML

We can align images according to the text around it, using the following alignments:

• Default aligns the image using default settings of the Web browser. Same as baseline.


• Left aligns the image in the left margin and wraps the text that follows the image.


• Right aligns the image in the right margin and wraps the text that precedes the image.


• Top aligns the top of the image with the surrounding text.


• TextTop aligns the top of the image with the top of the tallest text in the line.


• Middle aligns the middle of the image with the surrounding text.


• Absmiddle aligns the image with the middle of the current line.


• Baseline aligns the image with the baseline of the current line.


• Bottom aligns the bottom of the image with the surrounding text.


• Absbottom aligns the image with the bottom of the current line.


• Center aligns the center of the image with the surrounding text.

Below we can see examples of the different vertical alignments we can make for an image.

<img src="rainbow.gif" align = "texttop">

<img src="rainbow.gif" align = "middle">

<img src="rainbow.gif" align = "absmiddle">

<img src="rainbow.gif" align = "bottom">

<img src="rainbow.gif" align = "absbottom">

<img src="rainbow.gif" align = "baseline">