How to align images side by side with CSS?
Images are an important element on a webpage. We can add single or multiple images to the webpage. In this article, we are going to place images side by side using CSS properties.
Using CSS float property
We should use the div container to wrap the images and place each image inside the child div. The float:left property can be used to the images so that it floats left to the container. Set width percentage for each image and add padding between each image.
Example: Align images side by side with CSS
In this example, we have aligned the image side by side using the float property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.column {
float: left;
width: 30%;
padding: 5px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<h2> Place image side by side</h2>
<div class="container">
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627458592-101156.png" alt="image1">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627458592-101156.png" alt="image1">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627458592-101156.png" alt="image1">
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Using flex property
We can also use flexbox to align images side by side. Use display:flex property to the container class and specify the flex percentage and padding property to the image.
Example: Align image side by side with CSS flex
Conclusion
In this tutorial, we have learned to align the image side by side horizontally with CSS. We can use CSS float or flex property to do so. It is the simplest and easy way to align the image.
