How to align images side by side with CSS?


To align images side by side, we can use the float property in CSS. With that, flex also allows us to align images. Let us understand them one by one with examples beginning with aligning images side by side with the float property.

Align Images Side by Side With Float

We can float elements like images with CSS float property to either the left or right of the containing parent element. Other elements are placed around the floated content. Multiple elements with same value of float property enabled are all placed adjacently.

In this example, the image is placed on the left using the float property with the value left. Since all the images are set float: left therefore it gets arranged side by side −

.imageColumn {
   float: left;
   width: 25%;
   padding: 10px;
}

The .imageColumn is the div for all the images we want to align side by side −

<div class="imageColumn">
   <img src="https://www.tutorialspoint.com/images/clipart/flow/flow4.jpg" alt="Leaf" style="width:100%">
</div>

Example

The following is the code to align images side by side with float −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      .imageColumn {
         float: left;
         width: 25%;
         padding: 10px;
      }

      h1{
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>Images Aligned Side by Side example</h1>
   <div>
      <div class="imageColumn">
         <img src="https://www.tutorialspoint.com/images/clipart/flow/flow4.jpg" alt="Leaf" style="width:100%">
      </div>
      <div class="imageColumn">
         <img src="https://www.tutorialspoint.com/images/clipart/cartoon/cartoon2.jpg" alt="Cartoon" style="width:100%">
      </div>
      <div class="imageColumn">
         <img src="https://www.tutorialspoint.com/images/clipart/animal/animal9.jpg" alt="Animal" style="width:100%">
      </div>
      <div class="imageColumn">
         <img src="https://www.tutorialspoint.com/images/clipart/sport/sport11.jpg" alt="Sports" style="width:100%">
      </div>
   </div>
</body>
</html>

Align Images Side by Side With Flex

To align images side by side, use the display property in CSS and set it to flex. The alignment is set using the justify-content property with value center

div {
   display: flex;
   justify-content: center;
}

Example

Let us see an example to align images side by side with flex −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         display: flex;
         justify-content: center;
      }
      img {
         margin: 10px 20px;
      }
   </style>
</head>
<body>
   <h1>Align Images</h1>
   <div>
      <img src="https://www.tutorialspoint.com/jsf/images/jsf-mini-logo.jpg" />
      <img src="https://www.tutorialspoint.com/cprogramming/images/c-mini-logo.jpg" />
      <img src="https://www.tutorialspoint.com/cplusplus/images/cpp-mini-logo.jpg" />
   </div>
</body>
</html>

Updated on: 15-Nov-2023

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements