:::section{.abstract}
## Overview

**Image alignment** is a technique for repositioning images on our web pages (`top`, `bottom`, `right`, `left`, and `centre`). We could align the image using the `<img>` align attribute or using CSS. In this article, we are going to see both methods of image alignment.

:::

:::section{.main}

## Align Image in HTML Using CSS

### Center Alignment (horizontally center)

Set the left and right margins to `auto` and make the image into a block element to center it.

```htmlembedded
<!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>Align Image Using Internal CSS</title>

    
    <style>
      img {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    
    <img src="image.png" alt="click here" height="400px" width="600px" />
  </body>
</html>
```

**Output :**

![Center Alignment](https://scaler.com/topics/images/center-alignment.webp)

### Middle Alignment (vertically center)
Set the `vertical-align` as middle.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <p>
      An
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
      image with a middle alignment.
    </p>
  </body>
</html>

```

**Output :**

![Middle Alignment](https://scaler.com/topics/images/middle-alignment.webp)

### Top Alignment

Set the `vertical-align` as text-top.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        vertical-align: text-top;
      }
    </style>
  </head>
  <body>
    <p>
      An
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
      image with a text-top alignment.
    </p>
  </body>
</html>

```

**Output :**

![Top Alignment](https://scaler.com/topics/images/top-alignment.webp)
:::
:::section{.quiz_pop}
:::

:::section{.main}
### Bottom Alignment

Set the `vertical-align` as text-bottom.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        vertical-align: text-bottom;
      }
    </style>
  </head>
  <body>
    <p>
      An
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
      image with a text-bottom alignment.
    </p>
  </body>
</html>

```

**Output :**

![Bottom Alignment](https://scaler.com/topics/images/bottom-alignment.webp)

### Left Alignment

Set the `text-align` as left.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <p>
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
    </p>
  </body>
</html>

```

**Output :**

![Left Alignment](https://scaler.com/topics/images/left-alignment.webp)

### Right Alignment

Set the `float` as right.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        float: right;
      }
    </style>
  </head>
  <body>
    <p>
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
    </p>
  </body>
</html>

```

**Output :**

![Right Alignment](https://scaler.com/topics/images/right-alignment.webp)

:::

:::section{.quiz_pop}
:::

:::section{.main}

## Align Image in HTML Using the Align Attribute

The `align` attribute indicates how an image should be aligned concerning its container. To align the image, we use the align attribute. `<img>` element is an `inline` element. However, the `align` attribute has been deprecated since `HTML4` as HTML is not meant for formatting. So you should always use CSS for image alignment.

### Syntax :

```htmlembedded
<img align="left|right">

```

| Attribute Values |                   Description                   |
| :--------------: | :---------------------------------------------: |
|       left       | Its purpose is to align the image to the left.  |
|      right       | Its purpose is to align the image to the right. |

### Left Alignment

We Use the attribute value `left` to align the image to the left.

```htmlembedded
<!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>align image in html</title>
  </head>
  <body>
    <img
      align="left"
      src="image.png"
      alt="click here"
      height="200px"
      width="200px"
   >
  </body>
</html>

```

**Output :**

![align image in html Using Left Alignment](https://scaler.com/topics/images/align-image-in-html-using-left-alignment.webp)

### Right Alignment

We use the attribute value `right` to align the image to the right.

```htmlembedded
<!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>align image in html</title>
  </head>
  <body>
    <img
      align="right"
      src="image.png"
      alt="click here"
      height="200px"
      width="200px"
   >
  </body>
</html>

```

**Output :**

![align image in html Using right Alignment](https://scaler.com/topics/images/align-image-in-html-using-right-alignment.webp)

:::
:::section{.main}

## Browser Support

|      Browser      |    Version     |
| :---------------: | :------------: |
|   Google Chrome   | 38 and higher  |
|      Firefox      | 38 and higher  |
|      Safari       | 9.1 and higher |
|  Microsoft Edge   | 13 and higher  |
| Internet Explorer |       10       |

:::
:::section{.quiz_pop}
:::
:::section{.summary}

## Conclusion

- We have looked at many examples of image alignment using `CSS` and the `align` attribute.
- `align` attribute is not supported since `HTML4`, so we should always use CSS for image alignment.

:::

Mrinal Bhattacharya

JavaScript Course With Certification: Unlocking the Power of JavaScript

Welcome to the free Python course with certificate for beginners, designed to help you kickstart your programming journey. This comprehensive Python course online offers a certificate upon completion, covering essential topics like basic Python fundamentals, data structures, object-oriented programming, and more. With 9 hours and 48 minutes of content, you'll gain the knowledge and confidence to start working on your Python projects.

Software Engineer and Instructor at Scaler

Python Course for Beginners With Certification: Mastering the Essentials

Embark on your programming journey with our Free Java Course with Certificate. Master the fundamentals of Java and gain the skills needed for advanced Java development. This easy-to-follow course is designed with beginners in mind, offering a structured learning path to specialize in Java programming. With no prerequisites, this online Java course empowers you to learn Java at your own pace and take the first step toward a promising career in tech.

Software Engineer & Instructor

Java Course - Mastering the Fundamentals

Kickstart your journey into web development with this free JavaScript course online with a certificate. Designed for beginners, this comprehensive JavaScript online course covers the essential concepts and skills needed to master Javascript, one of the most popular and widely used programming languages in the world. With a course duration of 10 hours and 9 minutes, you'll learn everything from the basics to advanced techniques, all at your own pace.

Scaler Topics free DBMS course is designed to help beginners learn about the fundamental concepts of database management systems. The course is completely online, and it comes with a free certificate of completion that you can add to your resume or LinkedIn profile. You'll learn about the most popular DBMS like MySQL, Oracle, and SQL Server, as well as the theoretical foundations of databases.

Lead DSML Instructor at Scaler

DBMS Course - Master the Fundamentals and Advanced Concepts

Gain programming expertise with our C++ Course! Covering basics to advanced concepts, this online program provides a comprehensive curriculum encompassing environment setup, variables, conditional statements, loops, functions, pointers, arrays, sorting, character arrays, strings, and more. This C++ online course is perfect for beginners or seasoned programmers looking to enhance their skills and earn a certificate.

Instructor & Engineering Lead

C++ Course: Learn the Essentials

Introducing the Free Data Science with Python and SQL Certification Course Online, a comprehensive beginner's program designed to help aspiring data scientists learn the essential skills in the rapidly growing field of data science. This course offers a unique blend of practical and theoretical knowledge, combining the powerful programming language Python and the versatile database management system SQL to help you analyze, visualize, and interpret data efficiently.


Python and SQL for Data Science

Find out how to align Image in HTML along with easy-to-grasp examples and code explanations on Scaler Topics.

How to Align Image in HTML? | Scaler Topics

Technical Content Writer at Scaler | Mentor @GSSoC'23 | Samsung Solve For Tomorrow - Top 50 | SIH'23 Finalist

Bharti Kumari

Developer Advocate at Scaler academy(InterviewBit)

Ankit Mishra

---
canonical_url: https://www.scaler.com/topics/align-image-in-html/
title: How to Align Image in HTML? | Scaler Topics
description: Find out how to align Image in HTML along with easy-to-grasp examples and code explanations on Scaler Topics.
author: Bharti Kumari
category: HTML
amphtml: https://www.scaler.com/topics/align-image-in-html/amp/
publish_date: 2022-07-19
---

:::section{.abstract}
## Overview

**Image alignment** is a technique for repositioning images on our web pages (`top`, `bottom`, `right`, `left`, and `centre`). We could align the image using the `<img>` align attribute or using CSS. In this article, we are going to see both methods of image alignment.

:::

:::section{.main}

## Align Image in HTML Using CSS

### Center Alignment (horizontally center)

Set the left and right margins to `auto` and make the image into a block element to center it.

```htmlembedded
<!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>Align Image Using Internal CSS</title>

    
    <style>
      img {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    
    <img src="image.png" alt="click here" height="400px" width="600px" />
  </body>
</html>
```

**Output :**

![Center Alignment](https://scaler.com/topics/images/center-alignment.webp)

### Middle Alignment (vertically center)
Set the `vertical-align` as middle.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <p>
      An
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
      image with a middle alignment.
    </p>
  </body>
</html>

```

**Output :**

![Middle Alignment](https://scaler.com/topics/images/middle-alignment.webp)

### Top Alignment

Set the `vertical-align` as text-top.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        vertical-align: text-top;
      }
    </style>
  </head>
  <body>
    <p>
      An
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
      image with a text-top alignment.
    </p>
  </body>
</html>

```

**Output :**

![Top Alignment](https://scaler.com/topics/images/top-alignment.webp)
:::
:::section{.quiz_pop}
:::

:::section{.main}
### Bottom Alignment

Set the `vertical-align` as text-bottom.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        vertical-align: text-bottom;
      }
    </style>
  </head>
  <body>
    <p>
      An
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
      image with a text-bottom alignment.
    </p>
  </body>
</html>

```

**Output :**

![Bottom Alignment](https://scaler.com/topics/images/bottom-alignment.webp)

### Left Alignment

Set the `text-align` as left.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <p>
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
    </p>
  </body>
</html>

```

**Output :**

![Left Alignment](https://scaler.com/topics/images/left-alignment.webp)

### Right Alignment

Set the `float` as right.

```htmlembedded
<!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>align image in html</title>

    
    <style>
      img {
        float: right;
      }
    </style>
  </head>
  <body>
    <p>
        
      <img src="image.png" alt="click here" height="200px" width="200px" />
    </p>
  </body>
</html>

```

**Output :**

![Right Alignment](https://scaler.com/topics/images/right-alignment.webp)

:::

:::section{.quiz_pop}
:::

:::section{.main}

## Align Image in HTML Using the Align Attribute

The `align` attribute indicates how an image should be aligned concerning its container. To align the image, we use the align attribute. `<img>` element is an `inline` element. However, the `align` attribute has been deprecated since `HTML4` as HTML is not meant for formatting. So you should always use CSS for image alignment.

### Syntax :

```htmlembedded
<img align="left|right">

```

| Attribute Values |                   Description                   |
| :--------------: | :---------------------------------------------: |
|       left       | Its purpose is to align the image to the left.  |
|      right       | Its purpose is to align the image to the right. |

### Left Alignment

We Use the attribute value `left` to align the image to the left.

```htmlembedded
<!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>align image in html</title>
  </head>
  <body>
    <img
      align="left"
      src="image.png"
      alt="click here"
      height="200px"
      width="200px"
   >
  </body>
</html>

```

**Output :**

![align image in html Using Left Alignment](https://scaler.com/topics/images/align-image-in-html-using-left-alignment.webp)

### Right Alignment

We use the attribute value `right` to align the image to the right.

```htmlembedded
<!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>align image in html</title>
  </head>
  <body>
    <img
      align="right"
      src="image.png"
      alt="click here"
      height="200px"
      width="200px"
   >
  </body>
</html>

```

**Output :**

![align image in html Using right Alignment](https://scaler.com/topics/images/align-image-in-html-using-right-alignment.webp)

:::
:::section{.main}

## Browser Support

|      Browser      |    Version     |
| :---------------: | :------------: |
|   Google Chrome   | 38 and higher  |
|      Firefox      | 38 and higher  |
|      Safari       | 9.1 and higher |
|  Microsoft Edge   | 13 and higher  |
| Internet Explorer |       10       |

:::
:::section{.quiz_pop}
:::
:::section{.summary}

## Conclusion

- We have looked at many examples of image alignment using `CSS` and the `align` attribute.
- `align` attribute is not supported since `HTML4`, so we should always use CSS for image alignment.

:::

Attribute Values	Description
left	Its purpose is to align the image to the left.
right	Its purpose is to align the image to the right.

Browser	Version
Google Chrome	38 and higher
Firefox	38 and higher
Safari	9.1 and higher
Microsoft Edge	13 and higher
Internet Explorer	10