How to Align Multiple Images Horizontally in HTML

If you are looking for a way to align multiple images horizontally in HTML, then this is the post for you. It will teach you how to show photos side by side with CSS and HTML. How to align multiple images horizontally in HTML is a question I hear more often than you might think. While some users publish their site with just one image, the majority of people use at least two or three pictures on any given post.

The problem? Users are stuck trying to figure out how to line up those pesky little photos next to each other so they all fit nicely on the page without overlapping! It’s time for me to show you how it’s done! Now, let’s get down and dirty with the code – but don’t worry – this won’t hurt a bit!

How to align images side by side in html?

If you want to show images side by side, just use <img> tag with the src value of which images you want to show. Check the below code.

HTML:

<img src="images/4.jpeg" class="img_item">
<img src="images/5.jpeg" class="img_item">
<img src="images/7.jpeg" class="img_item">
<img src="images/9.jpeg" class="img_item">
<img src="images/11.jpeg" class="img_item">

CSS:

.img_item{
	width: 300px;
}

In the above code, I have used small CSS code i.e. width: 300px; to make all images fixed width. Now depending on browser width, the images will be shown side by side.

If you resize the browser window the image item will be wrapped depending on the image width and browser width.

If you noticed, the last image is shown in the next line. This is because there is no available space for that image to show all images horizontally.

How to align images horizontally without wrap?

In the above example, you have seen that the image will wrap depending on browser width as well as image width. But if you want to show all images horizontally without wrapping and also you don’t have any problem with the horizontal scrollbar then follow the code below.

Html:

<div class="img_container">
	<img src="images/4.jpeg" class="img_item">
	<img src="images/5.jpeg" class="img_item">
	<img src="images/7.jpeg" class="img_item">
	<img src="images/9.jpeg" class="img_item">
	<img src="images/11.jpeg" class="img_item">
</div>

CSS:

.img_item{
	width:300px;
}
.img_container{
	overflow: scroll;
	white-space:nowrap;
}

Here I have wrapped all images into a <div> element i.e. .img_container. After that set its overflow property to scroll. The main thing to prevent the image wrap set the white-space property to nowrap.

How to center multiple images in div?

For this example, I am going to use flex to show the images at the center of a div element. Let’s check the code first.

HTML:

<div class="img_container">
	<img src="images/4.jpeg" class="img_item">
	<img src="images/5.jpeg" class="img_item">
	<img src="images/7.jpeg" class="img_item">
</div>

CSS:

.img_container{
	display: flex;
	justify-content: center;
}
.img_item{
	width:300px;
	padding: 5px;
}

In the above example, I have set .img_container display property to flex and also set justify-content to center. It will align all child elements to the center position.

How to align images horizontally and add responsiveness?

To add responsiveness of horizontally aligned images, you have to use CSS media queries. For example, if you want to show 4 images side by side on a larger screen or you want to show three images side by side when the maximum screen size is 992px, you can easily do it by using multiple media queries. Check the below code.

HTML:

<div class="img_container">
	<div class="img_item">
		<img src="images/4.jpeg">
	</div>
	<div class="img_item">
		<img src="images/5.jpeg">
	</div>
	<div class="img_item">
		<img src="images/7.jpeg">
	</div>
	<div class="img_item">
		<img src="images/9.jpeg">
	</div>
	<div class="img_item">
		<img src="images/11.jpeg">
	</div>
</div>

CSS:

html, body{
	padding: 0;
	margin: 0;
}

.img_container{
	display: flex;
	flex-wrap: wrap;
}
.img_item{
	width: 24%;
	padding: 5px;
}
.img_item img{
	width: 100%;
	height: auto;
}


@media (max-width: 1200px) {
	.img_item{
		width: 23%;
	}
}

@media (max-width: 992px) {
	.img_item{
		width: 31.33%;
	}
}

@media (max-width: 768px) { 
	.img_item{
		width: 48%;
	}
}

@media (max-width: 576px) {
	.img_item{
		width: 100%;
	}
}

In the above example, you can see I am using a wrapper i.e. .img_container and also add multiple <div> elements with the class name .img_item. I also have added responsiveness to the image inside the img_item <div> element.

Conclusion

In this blog post, we’ve discussed how to align multiple images horizontally in HTML. If you have any other questions about the tutorial or want to share your thoughts on it with us, feel free to leave a comment below!