HTML <img> align Attribute

Last Updated : 23 Apr, 2025

The HTML <img> 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

<img align="left | right | center | top | middle | bottom ">

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 <img> 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.

<img src="image.jpg" alt="Left Aligned" align="left">

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.

<img src="image.jpg" alt="Right Aligned" align="right">

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.

<img src="image.jpg" alt="Top Aligned" align="top">

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.

<img src="image.jpg" alt="Middle Aligned" align="middle">

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.

<img src="image.jpg" alt="Bottom Aligned" align="bottom">

`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.

<img src="image.jpg" alt="Center Aligned" align="center">

Example 1: Aligning the Image Left and Right

In this example we will be using the deprecated align attribute in <img> 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

<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 <head> and <body> section.
Inside the <body>, there are two headings: <h1> displays “GeeksforGeeks” and <h2> displays “HTML <img> align Attribute”.
The first <img> tag shows an image from a URL and aligns it to the right of the page using align=”right”.
The second <img> 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 <img> tag to center-align the image within an <h2> 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:

HTML img align center

In this example:

The code consists of a standard HTML document with <html> and <body> sections.
The <h2> element contains both text and an image. The text “HTML img” is followed by an image.
The <img> tag loads an image from the provided URL with the alt text “GeeksforGeeks logo”.
The image is aligned to the center within the <h2> heading using the align="center" attribute.
After the image, the text “align Attribute” appears within the same <h2> heading. Browsers Support