Skip to content
Related Articles

Related Articles

How to align Image in HTML?

Improve Article
Save Article
  • Last Updated : 21 Jul, 2021
Improve Article
Save Article

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>
    <!-- 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
Related Articles

Start Your Coding Journey Now!