Javatpoint Logo
Javatpoint Logo

How to align image in Html

If we want to move the image to the different locations on the web page using the Html tag, we have to follow the steps which are given below.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to align an image:

Step 2: Now, place the cursor inside the <img> tag of that image which we want to align. And then, we have to use the align attribute of the img tag for specifying the location. So, we have to type the align attribute as same as described in the following block.

Step 3: After specifying the location, we have to save the Html code and then run the file. There are following various Html code which shows the image in the paragraph at the different locations:

1. Middle

This alignment value sets the image in the middle.

Test it Now

The output of above Html code is shown in the following Screenshot:

How to align image in Html

2. Top

This alignment value sets the image at the top.

Test it Now

The output of above Html code is shown in the following Screenshot:

How to align image in Html

3. Bottom

This alignment value sets the image at the bottom.

Test it Now

The output of above Html code is shown in the following Screenshot:

How to align image in Html

4. Left

This alignment value sets the image at the left.

Test it Now

The output of above Html code is shown in the following Screenshot:

How to align image in Html

5. Right

This alignment value sets the image at the right.

Test it Now

The output of above Html code is shown in the following Screenshot:

How to align image in Html




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA