Last Updated : 04 Sep, 2024
Summarize
Comments
Improve
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 ">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: Aligning the Image Left and Right
In this example we demonstrates 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.
<!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: Aligning the Image in the Center
In this example we 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.
<!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
The HTML <img> align attribute was historically used to set the alignment of images but is now deprecated in favor of CSS methods. Using CSS for image alignment provides greater flexibility and control over layout and design. HTML remains the foundation of web pages, and learning it thoroughly is essential for web development. For more information, refer to comprehensive HTML tutorials and examples.
Supported Browsers
The browser supported by HTML <img> alignAttribute are listed below:
- Google Chrome: Version 38 and later
- Firefox: Version 33 and later
- Microsoft Edge: Version 13 and later
- Opera: Version 25 and later
- Safari: Version 9 and later
HTML <img> align Attribute – FAQs
Why is the <img> align attribute deprecated in HTML5?
The <img> align attribute is deprecated in HTML5 to encourage the use of CSS for styling and layout control, which provides more flexibility and separation of content from presentation.
How do you align images in HTML5 without the align attribute?
In HTML5, use CSS properties such as float for horizontal alignment, vertical-align for vertical alignment within text, or flexbox and grid layouts for more complex positioning.
How do browsers handle the deprecated <img> align attribute?
Most modern browsers still render the <img> align attribute for backward compatibility, but the results can vary, and it’s not guaranteed to work consistently across all browsers.
Does the <img> align attribute affect responsive design?
The <img> align attribute does not provide responsive alignment options. For responsive design, it’s best to use CSS with media queries and flexible layout properties like flexbox or grid.
Improve
