Home »
CSS
How to align images side by side with CSS?
In this article, we'll see how we can align images side by side with CSS?
Submitted by Apurva Mathur, on July 27, 2022
Images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone "a picture is worth a thousand words" meaning-rich tools, and sure, on social media. We can use many pictures on a webpage.
For this, we'll use the CSS float property and we'll keep the images in a different div container.
The float property defines the location of the HTML element. It shifts the element to the right side or the left side (According to the preference).
float property values:
- none
- left
- right
- initial
- inherit
Among all these values none of the values center on the floated elements so we have to apply the custom CSS.
HTML and CSS code to align images side by side
<!DOCTYPE html>
<html>
<head>
<style>
.images {
float: left;
width: 25%;
padding: 10px;
}
</style>
</head>
<body>
<div>
<div class="images">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Snow" style="width:100%">
</div>
<div class="images">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Snow" style="width:100%">
</div>
<div class="images">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Snow" style="width:100%">
</div>
</div>
</body>
</html>
Output:
CSS Tutorial & Examples »