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:

Example: Align images side by side

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.