Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to align Image in HTML?

  • Last Updated : 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: 

Attention reader! All those who say programming isn't for kids, just haven't met the right mentors yet. Join the  Demo Class for First Step to Coding Coursespecifically designed for students of class 8 to 12. 

The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.

<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>
    <!-- Keep align attribute value as left -->
    <img align="left" src="https://media.geeksforgeeks.org/wp-
                           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>
    <!-- Keep align attribute value as right -->
    <img align="right" src="https://media.geeksforgeeks.org/wp-
                            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>
    <!-- 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:

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>
    <!-- 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: 

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>
    <!-- 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:

BrowserVersion 
Chrome29.0
Firefox11.0
Safari22.0
Internet Explorer10
Opera48

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :