Home / Articles / Programming languages / Markup languages / HTML & CSS / Aligning images in HTML

Aligning images in HTML

Aligning images in HTML
 
Aligning images in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

align-absbottom

absmiddle

The middle of the image is aligned with the center line of the text.

align-absmiddle

baseline or bottom

The bottom of the image is aligned with the baseline of the text. This setting is default.

align-baseline-or-bottom

left

Image is located left to the parent element.

align-left

middle

The middle of the image is aligned with the baseline of the text.

align-middle

right

Image is located right to the parent element.

align-right

texttop

The upper part of the image is aligned with the highest text element of the current line.

align-texttop

top

The upper part of the image is aligned with the highest element of the current line.

align-top

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.

Aligning images in HTML

 

Read also

Text alignment in HTML

Text alignment in HTML

Graphics formats in HTML

Graphics formats in HTML

Image size in HTML

Image size in HTML

Inserting images in HTML

Inserting images in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation