HTML img align attribute Examples
Example 1: In this example, we are aligning the image left and right.
<!DOCTYPE html>
<html>
<head>
<title>
HTML img align Attribute
</title>
</head>
<body>
<h1>
w3wiki
</h1>
<h2>
HTML img align Attribute
</h2>
<img src=
"https://media.w3wiki.org/wp-content/uploads/20190506164011/logo3.png" alt="w3wiki logo"
align="right">
<img src=
"https://media.w3wiki.org/wp-content/uploads/20190506164011/logo3.png" alt="w3wiki logo"
align="left">
</body>
</html>
Output:
Example 2: In this example, we are aligning the image in center.
<!DOCTYPE html>
<html>
<head>
<title>HTML img align Attribute</title>
</head>
<body>
<h2>
HTML img
<img
src=
"https://media.w3wiki.org/wp-content/uploads/20190506164011/logo3.png"
alt="w3wiki logo"
align="center"
/>align Attribute
</h2>
</body>
</html>
Output:
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.
HTML align Attribute
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
ormargin
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.