The HTML align attribute sets an image’s alignment relative to surrounding elements, allowing horizontal or vertical positioning. It is deprecated in HTML5 and replaced by CSS properties like float and vertical alignment for more flexible and modern alignment options.

Note: The align attribute is not supported by HTML 5. It is now deprecated, HTML 5 uses CSS property instead of this attribute.

Syntax

In this syntax:

• left: Aligns the image left with text wrapping around it.
• right: Aligns the image right with text wrapping around it.
• center: Centers the image.
• top: Aligns the image with the top of the text.
• middle: Aligns the image with the middle of the text.
• bottom: Aligns the image with the bottom of the text.

HTML align Attribute

The align attribute accepts several values that determine how the image aligns with other content:

1. left

Aligns the image to the left of its container. Text and other content will flow to the right of the image, wrapping around it.

2. right

Aligns the image to the right of its container. Text and other content will flow to the left of the image, wrapping around it.

3. top

Aligns the image at the top of the surrounding text or element. This is particularly useful when you want the image to align with the top of a line of text, making sure it doesn’t affect the vertical flow of the content.

4. middle

It vertically aligns the image in the middle of the surrounding text or element. This is often used to align the image to the center of the line, providing a neat and balanced look.

5. bottom

It aligns the image at the bottom of the surrounding text or element. This is helpful when you want the image to align with the bottom of a line of text, ensuring that it doesn’t affect the rest of the content.

6. center

Centers the image within its container. This does not apply to inline images, and is not a valid value for the align attribute.

Example 1: Aligning the Image Left and Right

In this example we will be using the deprecated align attribute in tags to position images. The first image aligns to the right, and the second image aligns to the left.

Now, let us understand with the help of the example:

<html>
<body>
    <h1>
        GeeksforGeeks
    h1>
    <h2>
        HTML img align Attribute
    h2>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" 
              alt="GeeksforGeeks logo" align="right">
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
              alt="GeeksforGeeks logo" align="left">
body>
html>

Output: 

In this example:

• The code consists of a standard HTML document with a and section.
• Inside the , there are two headings:

  displays "GeeksforGeeks" and

  displays "HTML align Attribute".

• The first tag shows an image from a URL and aligns it to the right of the page using align="right".
• The second tag also shows the same image but aligns it to the left of the page using align="left".

Example 2: Aligning the Image in the Center

In this example, we will use the deprecated align attribute within an tag to center-align the image within an

element. The image is positioned in the middle of the text.

Now, let us understand with the help of the example:

HTML

<html>
<body>
    <h2>
        HTML img
        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" 
             alt="GeeksforGeeks logo"align="center" />
        align Attribute
    h2>
body>
html>

Output:

In this example:

• The code consists of a standard HTML document with and sections.
• The

  element contains both text and an image. The text "HTML img" is followed by an image.

• The tag loads an image from the provided URL with the alt text "GeeksforGeeks logo".
• The image is aligned to the center within the

  heading using the align="center" attribute.

• After the image, the text "align Attribute" appears within the same

  heading. Browsers Support

Browser Support

Browser
Attributes	Yes	Yes	Yes	Yes	Yes
Version Supported	1	12	1	12.1	3