Open In App

HTML <img> align Attribute

Last Updated : 27 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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. 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-attribute-example-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.


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads