Best way to align multiple images in HTML horizontally

If you’re like most web designers, you’ve probably noticed that it’s becoming increasingly common to include multiple images in a single web page. Some websites align multiple images in HTML to create a layout or design. For example, you might have a slider that rotates through a series of images as you scroll down the page. This type of design has become very popular in recent years because it adds a lot of visual interest to the page and helps to draw the reader’s attention.

This can be a great way to add visual interest and spice to your website, but it can also be confusing for your visitors if the images aren’t properly aligned. When you try to align the images so that they appear side by side rather than stacked on top of each other with the first image in our list, a problem frequently arises. Fortunately, there are numerous ways to arrange your images so that they are neatly lined up and look professional.

In this article, we’ll outline the basic steps you need to take in order to align multiple images horizontally on a webpage. Here are a few of our favorites.

Select the ideal images

Locate the images you want to use first. If you already have those images, that is fantastic! If not, you may search the internet for photographs in a number of areas. Once you’ve located the pictures you want to utilize, just copy their URL and paste them into your project.

How to Align Multiple Images in HTML Horizontally

There are a few different ways that you can easily align your images horizontally on your webpage. Check out these methods to see which one suits you the best.

Add HTML

First, let’s take a look at how you can align your images using a div tag.

This method doesn’t require any fancy code or plugins, which makes it a great option for beginners. All you have to do is create a container for the images and then place them in the order that you want.

First, Open the HTML editor on your pc.
Create a new HTML document first, then start putting your text inside the body tag.
In your HTML document, create a <div> container for the images you want to align side by side. A <div> can contain other HTML elements like <p> and <h1>. In this example, we will name our container “container”.
Next, we’ll add some <div> tags inside of our <div> container so we can create some space in between the image we want to position next to the first one. The <div> tag is a fundamental element that separates your content into sections. In the code below, I’ve added three <div> tags to the <div> container to create a spacing between my image and the image next to it. You’ll want to add as many <div> tags as you need to divide your images the way you want them to appear on the page. Make sure to leave the </div > tag at the end, this is important for adding spacing between your elements.
Once you’ve added your <div> tags to the div container, add the images in between those tags with <img> tag and Change the source attribute to the URL of the image you want to use. For example, if I wanted an image titled “picture1.jpg” to be displayed on my page I would enter the following line of code: <img src=”https://www.example.com/assets/picture1.jpg”>
You will want to add the alt attribute which will give the text content that describes the image when it appears on an HTML page. Enter a description for the image here. If you don’t want the description to appear, you can skip this step.
Finally, Add the image’s height and width properties, which represent the image’s dimensions in the HTML code. The height should be the height that you want the image displayed at and the width should be the width of the image being displayed

The following code will generate a web page similar to the one shown below:

<!DOCTYPE html>
<html>
  <head>
    <title>Pretty</title>
  </head>
  <body>
    <div class="container">
      <div class="image"> <img src="https://i.pinimg.com/736x/fb/14/36/fb14367fee180889b66e95d3a0659a4a.jpg" alt="This is my image." height="850px"/> </div> 
      <div class="image"> <img src="https://i.pinimg.com/564x/30/33/4c/30334cb60ebcb05da34f6fc9bd2a9d8e.jpg" alt="This is my second image." height="850px"/> </div> 
     <div class="image"> <img src="https://i.pinimg.com/564x/af/e3/eb/afe3eb181af33e1af29ec78448631382.jpg" alt="My third image." height="850px"/> </div> 
    </div>
  </body>
</html>
Code language: HTML, XML (xml)

Add CSS

We now know that our images are correctly linked. We can now start adjusting the alignment of each image on the page to make it look its best. The last step is to position the photos side by side using CSS.

We will use the float property as Float is a great way to create an image that stands out from the surrounding.
The padding property sets the amount of space you want between each edge of your div and the margin property sets the distance that you want the image to be from the edge of the div. These two attributes work together to determine how much space exists between the two photos.
For a larger gap between the images, you could increase the padding and decrease the margin until you get the desired results.

.container {
  align-items: center; 
  float: left;
}
.image{
    float: left;
  padding: 5px;
}
Code language: CSS (css)

If you follow these rules, your container should look like this:

Now that you’ve learned how to align images side by side.

Try applying this concept to a different layout by swapping out the images and experimenting with different CSS styles. Have fun!

Using flexbox

Now let’s look at another simple way to align your images horizontally using a div tag.

Now, we’ll explore how to use HTML’s flexbox property to align photos side by side.

Flexbox is a property of the CSS layout module that allows you to specify how items in your row should be arranged. It allows you to set width and height properties for each item in your row based on certain rules that you define.
Before we begin setting up our row, we need to create a container for our images. In the code below, we have defined a div that will serve as the container for all of our images.
We will place all of the images within this container and set its display property to an inline-block. This will ensure that the images are all placed next to each other rather than stacked on top of each other. Each image will be positioned within the container according to its corresponding class name.
Next, we will define the height and width of our images based on the rule that we have set up in our flexbox configuration.
Finally, the styles that will control the layout must be written. As you can see in the code block below, we have defined a style for each item in the grid and used the “flex“ property to set the alignment of the item concerning the other items in the row.

<!DOCTYPE html>
<html>
  <head>
    <title>Pretty Paris</title>
  </head>
  <style>
.container {
  display: flex;
  align-items: center; 
 padding-left: 10px;
}
img{
  margin-left: 15px ;
  margin-right: 15px;
}
  </style>
  <body>
    <div class="container">
      <div class="image"> <img src="https://i.pinimg.com/564x/8c/0b/3a/8c0b3ad94d124ac7b4a1262aa2d2969f.jpg" alt="This is my image." height="850px"/> </div> 
      <div class="image"> <img src="https://i.pinimg.com/564x/85/97/45/8597454b816fc5685761e8dc9ac20933.jpg" alt="This is my second image." height="850px"/> </div> 
     <div class="image"> <img src="https://i.pinimg.com/564x/c5/5b/d5/c55bd5d0277abd58dce98363ec1dac95.jpg" alt="My third image." height="850px"/> </div> 
    </div>
  </body>
</html>
Code language: HTML, XML (xml)

Here’s how it looks:

Using grid

Do you ever find yourself wanting to align images side by side in HTML, but don’t know how? Well, you’re in luck! In this blog post, I’ll show you how to do it using a grid. Check it out!

Follow these steps to align images side by side in HTML by using a grid:

This property accepts a number as a value, which determines how many columns and rows you want for your grid. This works great for creating layouts for websites, blogs, emails, etc. You can also change the size of the grid by adding the margin property to the grid element. You can control the distance between the rows and columns using this.
Create an HTML structure for the images and layout using a div element with an id attribute. To create the empty div, open your HTML code editor. Then, type in something like this: <div class=”grid-container”> </div>
Specify where you would like your images to be located in your HTML using the image tags. Create an additional div element and specify a class and an ID attribute and assign it to the “grid” div. This is where the grid container will be positioned inside the HTML structure.
Using the CSS property selector, change the container’s display property to “grid” For example, in your CSS file, you could include the following:text-wrapper display: grid. And define some properties for the grid.

<!DOCTYPE html>
<html>
  <head>
    <title>Pretty</title>
  </head>
  <style>
  .container {
  display: grid;
  grid-template-columns:20% 20% 20%;
  align-items: center;

}
  </style>
  <body>
    <div class="container">
      <div class="image"> <img src="https://i.pinimg.com/564x/3e/54/2d/3e542d8f4b6d42dc3292b3cf270adac6.jpg" alt="This is my image." height="850px"/> </div> 
      <div class="image"> <img src="https://i.pinimg.com/736x/34/41/8d/34418d4eea1a15625d6c3b3748de495f.jpg" alt="This is my second image." height="850px"/> </div> 
     <div class="image"> <img src="https://i.pinimg.com/736x/27/41/08/274108a5f7134d48d8829c98255f0b76.jpg" alt="My third image." height="850px"/> </div> 
    </div>
  </body>
</html>
Code language: HTML, XML (xml)

Repeat this process as many times as you want and you’ll have a set of perfectly aligned images in no time!

Tips For Image Alignment In HTML Code

If you need to resize your images to fit within the space on your website, you can use an online tool called Fotor to do this.

All you need to do is upload an image of yours that is smaller than you would like it to display and then simply use the tool to adjust the image size to the size you need.

Conclusion

Using HTML to combine images side by side is an excellent approach to building a visually attractive web page. There are several methods for horizontally aligning numerous photos in HTML. The float attribute, grid, and flexbox are some of the best ways to align multiple images in HTML. Thanks for reading!