Align DIVs to center and place them next to each other - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Div Align

Description

Align DIVs to center and place them next to each other

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">
div.img {
   display:inline-block;
}

div.img img {
   display:inline;
   margin:6px;
   opacity:0.6;
}

div.img a:hover img {
   opacity:2;
}

.group {<!-- www .j a v  a  2 s .co  m-->
   text-align:center
}
</style> 
 </head> 
 <body> 
  <div class="group">
    Group 1: 
   <br> 
   <div class="img"> 
    <a href="" data-lightbox="Group-1"> <img src="https://www.java2s.com/style/demo/Safari.png" alt="Een" width="100" height="100"> </a> 
   </div> 
   <div class="img"> 
    <a href="" data-lightbox="Group-1"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Twee" width="100" height="100"> </a> 
   </div> 
  </div> 
  <div class="group">
    Group 2: 
   <br> 
   <div class="img"> 
    <a href="" data-lightbox="Group-2"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Drie" width="100" height="100"> </a> 
   </div> 
   <div class="img"> 
    <a href="" data-lightbox="Group-2"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="Vier" width="100" height="100"> </a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials