✖

All TalkersCode Topics

Follow TalkersCode On Social Media

How To Align Multiple Images In HTML Horizontally

Last Updated : Jan 1, 2023

IN - HTML

How To Align Multiple Images In HTML Horizontally

In this tutorial we will show you how to align multiple images in HTML horizontally, sometimes there is a situation in website in which we have to align text at left, center and right.

So, this can be done by using CSS property of text-align and its values are like left, right and center and it is done now.

But sometimes we have to align images side by side in horizontal line, this is time when we need guidance. So, here we will give you an example that how to do it.

Step By Step Guide On How To Align Multiple Images In HTML Horizontally :-

1. By using CSS float:

Here, first we have to write a simple HTML code, which we use to write display an image on webpage.

Now, similar from that add one or more images. After that place these images in division tags and give CSS to it. You may able to give direct CSS to image tag also.

Now, in CSS provide it float property with value left and open it in required browser. 

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
       <div style="float:left">
        <img src="it_may_be_from_localdrive" alt="image_here" width="200px" height="200px">
    	</div>
    <div style="float:left">
        <img src="it_may_be_online" alt="image_there" width="250px" height="300px">
    </div>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here we use <img> tag, (which is a singular tag) with attributes type, src...
  5. Here src specifies the source file with its .extensions. Here, we have to give the name of image file if it is present in same folder in which .html file exists also… if not then we have to give proper location with image file name in src tag, to display image in browser
  6. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

How float works :-

As we know that float is used to align images side by side in horizontal line. Now also its values are left and right and we are here to discuss how it works.

If all the images have value of left then all the images align side by side in line and when the width completed, the next images will shift to next line and then next again side by side.

Whereas, if there are two or three images and from one of them we give an image value to right then it directly shifted to right side.

Then there is no specific situation that you can give only right value to last image. No, you are able to give this value to any image, but with right value, image directly shifts to right side.

Conclusion :-

At last, we can say that we are able to align images side by side with the help of float attribute, it’s a CSS property.

Also, there is a flex attribute which we use in next session to align images horizontally. But this one is most used and simplest way to align images. I hope this tutorial on how to align multiple images in HTML horizontally helps you.

Latest Tutorials