HTML <img> align Attribute

Last Updated : 25 Apr, 2024

HTML <img> align attribute is used to set the alignment of an image. It is an inline element. It is used to specify the alignment of the image according to surrounding elements.

Set align to “left,” “center,” or “right” for horizontal alignment. Example: <img src="example.jpg" align="right">.
We can achieve alignment via CSS properties such as float or margin for a flexible approach.

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 ">

Attribute Values:

for horizontal alignment:
- left: It sets the alignment of the image to the left.
- right: It sets the alignment of the image to the right.
- center: It sets the alignment of the image horizontally to the center.
for Vertical alignment:
- middle: It sets the alignment of the image to the middle.
- top: It sets the alignment of the image to the top.
- bottom: It sets the alignment of the image to the bottom.

HTML img align attribute Examples

Example 1: In this example, we are aligning the image left and right.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML img align Attribute
    </title>
</head>

<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:

Example 2: In this example, we are aligning the image in center.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>HTML img align Attribute</title>
    </head>

    <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

Supported Browsers:

The browser supported by HTML <img> align Attribute are listed below:

Google Chrome 1 and above
Edge 12 and above
Firefox 1 above
Apple Safari 3 and above
Opera 12.1 and above

HTML is the foundation of web pages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.