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.
Method 1: Left Alignment of the image
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 >
content/uploads/20190506164011/logo3.png" alt = "" >
</ body >
</ html >
|
Output:

Method 2: Right Alignment of the image
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 >
content/uploads/20190506164011/logo3.png" alt = "" >
</ body >
</ html >
|
Output:

Method 3: Middle Alignment of the image
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 >
content/uploads/20190506164011/logo3.png" alt = "" >GeeksforGeeks</ h4 >
</ body >
</ html >
|
Output:

Method 4: Top Alignment of the image
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 >
content/uploads/20190506164011/logo3.png" alt = "" >GeeksforGeeks</ h4 >
</ body >
</ html >
|
Output:

Method 5: Bottom Alignment of the image
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 >
content/uploads/20190506164011/logo3.png" alt = "" >GeeksforGeeks</ h4 >
</ body >
</ html >
|
Output:

Browser Support:
Browser |
Version |
Chrome |
29.0 |
Firefox |
11.0 |
Safari |
22.0 |
Internet Explorer |
10 |
Opera |
48 |
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
21 Jul, 2021
Like Article
Save Article