How to Insert an Image in HTML?

How to align Image in HTML?

Last Updated : 29 Apr, 2025

Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layouts.

Syntax

To align an image using the align attribute, the syntax is as follows:

<img align="left|right|middle|top|bottom">

Attribute Values

left: Aligns the image to the left.
right: Aligns the image to the right.
middle: Aligns the image to the middle.
top: Aligns the image to the top.
bottom: Aligns the image to the bottom.

Methods for Aligning Images in HTML

Below are the common methods for aligning images in HTML:

1. Left Alignment of the Image

Left alignment places the image on the left side of its container, and surrounding text or other elements will flow around it on the right side. It is also used when we want the image to appear alongside the text.

Syntax

<img align="left">

align=”left”: Aligns the image to the left of its container. The surrounding content, such as text, will flow around it on the right.

Now, let us understand with the help of the example:

HTML

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

2. Right Alignment of the Image

Right alignment of an image places it on the right side of its container. This allows the text to wrap around it on the left, which can be used to balance the layout visually or create a specific flow of content.

Syntax

<img align="right">

align=”right”: Aligns the image to the right side of its container. Text or other content flows around it on the left, which can be visually appealing when you want to balance text and image alignment within the page.

Now, let us understand with the help of the example:

HTML

<html>
<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

3. Middle Alignment of the Image

Middle alignment centers the image vertically in relation to the surrounding text. This creates a balanced visual effect, especially when the image and text are inline or when you want to align the image with the middle of a block of text.

Syntax

<img align="middle">

Now, let us understand with the help of the example:

HTML

<html>
<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

4. Top Alignment of the Image

Top alignment places the image at the top relative to the surrounding text. This method ensures that the image’s top edge aligns with the top of the text block, creating a clean and consistent start point for the content.

Syntax

<img align="top">

Now, let us understand with the help of the example:

HTML

<html>
<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

5. Bottom Alignment of the Image

Bottom alignment positions the image at the bottom of the container, ensuring the top of the text aligns with the top of the image. This creates a baseline alignment effect, making the image appear to anchor the text.

Syntax

<img align="bottom">

Now, let us understand with the help of the example:

HTML

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

Note => Using the align attribute in the <img> tag allows for easy alignment of images within your web pages. While this method is straightforward, it is recommended to use CSS for more flexibility and modern web design practices.

Conclusion

Aligning images in HTML is an essential part of web design, and there are multiple ways to achieve the desired layout. The align attribute offers quick and simple alignment options, but for modern, responsive web design, CSS techniques like Flexbox, Grid, and CSS float provide greater control and flexibility.

How to Insert an Image in HTML?

portalpirate

Improve

Article Tags :

Similar Reads

How to Center an Image in HTML?

Center an image in HTML can be done with the help of <center> tag. The <center> is depreciated from HTML5, so we can use the text-align property, margin, and different ways to center an image horizontally, vertically, or both using CSS. Table of Content Horizontally Center an Image using

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML. Table of Content Using img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary meth

How to Resize an Image in HTML?

Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint

How to Align Images in CSS?

Aligning images properly is essential for creating visually appealing and well-structured web pages. CSS can provide several methods to achieve this, each suited for the different scenarios. we are going to discuss how can we align images using CSS. Below are the following approaches to align images

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a

How to add background image in HTML ?

Adding a background image to HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add background image in HTML, but this attribute is depreciated in HTML5 and not in use. In place of background att

How to render HTML to an image ?

Converting HTML code into an image can be achieved through various methods, such as using the html2canvas JavaScript library or leveraging CSS. This capability is particularly useful for users who wish to share a visual representation of their code without sharing the actual code. This guide will de

How to Align Text in HTML?

We can use align attribute in HTML to align text to the left, right, and center. This attribute was used in older versions of HTML but it is deprecated in HTML5. We can change the alignment of the text using the text-align property for modern and flexible text alignment. 1. Align Text using align at

How to Move Image in HTML ?

The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement. Syntax<marquee> <i

How to Align input forms in HTML?

In HTML, input forms are typically displayed as block elements, taking up the full width of their container. While this is often desirable, there are times when you might want to align input forms horizontally or vertically within a container for aesthetic or layout purposes. These are the following