Align images side by side in the same line with caption - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Align

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Align

Description

Align images side by side in the same line with caption

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.imageContainer {<!--   w  ww .ja v  a  2 s. c o m-->
   float:left;
}

p {
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <div class="image123"> 
   <div class="imageContainer"> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" height="200" width="200"> 
    <p>This is image 1</p> 
   </div> 
   <div class="imageContainer"> 
    <img class="middle-img" src="https://www.java2s.com/style/demo/Safari.png" height="200" width="200"> 
    <p>This is image 2</p> 
   </div> 
   <div class="imageContainer"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" height="200" width="200"> 
    <p>This is image 3</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials