Aligning images in HTML
You can specify the position of an image relative to the text or other images on a webpage. The alignment of images is specified by the parameter align of the img tag. Table 1 lists possible values of this parameter and the result of its use.
Table 1. Alignment of image.
| Align value | Description | Result |
|---|---|---|
| absbottom | The bottom of the image is aligned with the lowest part of the current line. |
|
| absmiddle | The middle of the image is aligned with the center line of the text. |
|
| baseline or bottom | The bottom of the image is aligned with the baseline of the text. This setting is default. |
|
| left | Image is located left to the parent element. |
|
| middle | The middle of the image is aligned with the baseline of the text. |
|
| right | Image is located right to the parent element. |
|
| texttop | The upper part of the image is aligned with the highest text element of the current line. |
|
| top | The upper part of the image is aligned with the highest element of the current line. |
|
Note: although, all the values of the parameter align are supported in browsers, arguments absbottom, absmiddle, baseline and texttop are not described in the specification to HTML 4.
The most popular values are left and right, as they not only align the image to the edges of the browser window, but also wrap the text around the image. In order for the text to be a bit further from the image, it is recommended in the img tag to add hspace and vspace, which indicate the distance to the text in pixels (example 1).
Example 1. Wrapping the text around the image.
<img src="sample.gif" width="50" height="50" hspace="10" vspace="10" align="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The result of the given example is shown below.
