How to align Image in HTML?

21 Jul, 2021
Image alignment is used to move the image at different locations (top, bottom, right, left, middle) in our web pages. We use <img> align attribute to align the image. It is an inline element.
Syntax: 
<img align=”left|right|middle|top|bottom”>
Attribute Values:
left: It is used for the alignment of image to the left.
right: It is used for the alignment of image to the right.
middle: It is used for the alignment of image to the middle.
top: It is used for the alignment of image to the top.
bottom: It is used for the alignment of image to the bottom.
To align the image to the left use attribute value as “left”.
Syntax:
<img align=”left”>
Example : 
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Left Alignment of Image</title></head><body>    <h1>GeeksforGeeks</h1>    <h3>Welcome to GeeksforGeeks</h3>    <h4>Left Alignment of Image</h4>    <!-- Keep align attribute value as left -->    <img align="left" src="https://media.geeksforgeeks.org/wp-                           content/uploads/20190506164011/logo3.png" alt=""></body></html>
  Output: 
To align the image to the right use attribute value as “right”.
 Syntax: 
<img align=”right”> 
Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Right Alignment of Image</title></head><body>    <h1>GeeksforGeeks</h1>    <h3>Welcome to GeeksforGeeks</h3>    <h4>Right Alignment of Image</h4>    <!-- Keep align attribute value as right -->    <img align="right" src="https://media.geeksforgeeks.org/wp-                            content/uploads/20190506164011/logo3.png" alt=""></body></html>
  Output:
To align the image to the right use attribute value as “middle”.
 Syntax: 
<img align=”middle”>
 Example: 
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Image Alignment</title> </head> <body>    <h1>GeeksforGeeks</h1>    <h3>Welcome to GeeksforGeeks</h3>    <h4>Middle Alignment of Image</h4>    <!-- Keep align attribute value as "middle" -->   <h4>GeeksforGeeks <img align="middle" src="https://media.geeksforgeeks.org/wp-     content/uploads/20190506164011/logo3.png" alt="">GeeksforGeeks</h4></body> </html>
  Output:
To align the image to the right use attribute value as “top”.
 Syntax: 
<img align=”top”>
Example: 
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Image Alignment</title> </head> <body>    <h1>GeeksforGeeks</h1>    <h3>Welcome to GeeksforGeeks</h3>    <h4>Top Alignment of Image</h4>    <!-- Keep align attribute value as "top" -->   <h4>GeeksforGeeks <img align="top" src="https://media.geeksforgeeks.org/wp-     content/uploads/20190506164011/logo3.png" alt="">GeeksforGeeks</h4></body> </html>
  Output: 
 To align the image to the right use attribute value as “bottom”.
 Syntax: 
<img align=”bottom”>
 Example: 
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Image Alignment</title> </head> <body>    <h1>GeeksforGeeks</h1>    <h3>Welcome to GeeksforGeeks</h3>    <h4>Bottom Alignment of Image</h4>    <!-- Keep align attribute value as "bottom" -->   <h4>GeeksforGeeks <img align="bottom" src="https://media.geeksforgeeks.org/wp-     content/uploads/20190506164011/logo3.png" alt="">GeeksforGeeks</h4> </body> </html>
  Output:
 Browser Support:
 
anikaseth98
Picked
class 7
School Learning
School Programming
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Computer Security - Overview
Backup and Restore
How to Insert an Image in HTML?
What is Photoshop?
What is Hacking? Definition, Types, Identification, Safety
Libraries in Python
What are Different Output Devices?
Generations of Computers - Computer Fundamentals
GeeksforGeeks School
Reading Rows from a CSV File in Python