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