How to align Image in HTML? - GeeksforGeeks

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.
                                
Amazon Interview Experience (Off-Campus) 2022
How to Read Text Files with Pandas?
Must Do Coding Questions for Product Based Companies
TCS NQT Coding Sheet
Inshackle - Tool for Instagram Hacks in Kali Linux
Libraries in Python
Cloud Deployment Models
What is a Storage Device? Definition, Types, Examples
Generations of Computers - Computer Fundamentals